I’m trying to make a segment where I have 3 videos across and 2 rows down with more videos. I cant figure what block to use or how to add a video to it.
Please advise…
I would probably try that by adding two separate structure 3 column blocs and then add a video bric in each column. From there you will see the option to embed a YouTube video in the side panel if you click on each bric.
1 Like
I would do one that had 6 columns and each column was set to 4.
That way it will stack properly on smaller breakpoints. From 3 to 2 to 1.
Either way can be made to work. You will probably want to add space at the bottom of each column or they will be touching each other when viewed in mobile.
1 Like
Yes, both ways work. but if they are all in the same row you don’t have to deal with the padding of the row.
And as @Flashman points out you want to add some padding so they space out. I often will just use the standard Bootstrap classes to add vertical padding. For example. Add this class py-3 on the column
1 Like
Hey @gpalau
You can check out the Bloc Docs. https://help.blocsapp.com
And also the highly recommended video tutorials from @Eldar https://blocsmaster.com
Eldar has a bunch of free videos that get you started.
I subscribed to his free tutorials, but I havent received the password to log in… I was looking at the Bloc Docs, but I cant see how to add new columns… which is where im confused.
You will probably want to add space at the bottom of each column
I was looking into the Column panel, but I don’t see the padding for the column there… where would it be?
I managed to do a 6 column block but I dont know how to pad between the videos… I cant find that anywhere…
I cant find either, how to bring the videos closer to the Header…
is there a way to separate the rows on the top from the one on the bottom on the videos?
Select a column in the left side panel that contains a video bric. In the right side panel in the classes box enter either standard Bootstrap classes.
eg. py-3 (this gives you vertical padding top and bottom)
or make a custom class.
You may like to check out an app called videolightbox. This allows you to create video playlists with customisable thumbnails. It works with just about all the main video streaming services such as youTube and vimeo. Once a playlist is created, you embed code in the head and body section of your blocs site to display the video thumbnails. Clicking on a video opens it in a light box. The app is fully responsive and will display videos with the correct amount of margin on all devices. You can get the free version HERE. If you want to remove the watermark, you can buy a licence that removes the videolightbox branding from the videos. Best to try out the free version first to make sure it’s right for you.
Here is an example I made in Blocs (Scroll down the page to see some tips and tricks on how to embed the video gallery)
Please note: If you use self hosted videos, instead of video-sharing links, be sure to use only mp4 files - just drag them from you computer into the add video window of the app. You should also note that you should not use the Standard video player skin on self hosted videos. Choose one of the others such as the Mac skin. This is because the standard skin doesn’t allow the video controls to be used - the lightbox window will just close if you use the video controls. If you use one of the non-standard skins, all video controls will work in the lightbox.
1 Like
You know your link to the video gallery does not work, right?
Using the 6 column row like you have done select a column and then create a custom class. You can call it what you like, but choose something that makes sense to you. Apply padding to the bottom like shown in the attachment here. Now apply the same class to each column. You will have to adjust the column width appropriately at each breakpoint if needed.
1 Like
@KBConcepts It’s working for me, so not sure why it doesn’t work for you. Anyone else having issues with the link?