Once we have sized the 4 different videos for full screen, How can this feature be accomplished with videos for each breakpoints?
We know we can make a custom class and add images for each breakpoint.
By dragging an image into the class editor for each breakpoint.
Hard to understand your question, but it looks like you are using Blocs 3??
No using the newest Plus version. This site was built with v3 I just put this photo out there, so other could see generally what I mean.
You understand how we can make a custom class and add sized optimized images to each breakpoint. What I am looking to do is the same, but with Hero (full sized) videos for each breakpoints. Does that help?
Background videos ?
No, full screen videos. Each sized to its own breakpoint.
If you do what you’re suggesting when someone re sizes the window the video will change and start again.
Why have a different video per breakpoint? If your self serving the video, you could check it it was mobile or not on page load and then serve the video based on that.
Looking for enhanced optimization and streaming efficiency.
Good luck with that approach. I’ll leave you to it.
What kind of response it that? I remember a similar post where you said
What you’re saying, if I understand you correctly, it’s beyond Blocs. Probably has something to do with coding.
I thought you said in a the forum regarding images for each breakpoint was part of web development. Wouldn’t this be the same for videos?
How do web developers deal with serving video per breakpoint?
If I’ve understood the problem correctly, you need to have a different aspect ratio video displayed per breakpoint. I’ve assumed this because you talk about full screen video, this implies that you need to add background videos rather than a standard video bric. The standard bric would not normally be used for full screen video (although it can be used to create a full width video that will scale with breakpoints). The easiest way I know to deal with this is to create 4 different videos that mach the aspect ratio of each breakpoint. These can be added to 4 separate blocs set to full screen. You would then use the visibility options to display the correct bloc for its associated breakpoint.
Nice reply, thank you for taking the time to understand. What you said is what I was thinking, but was not sure the simplest way to go about it. To be clear the video will not be a background video.
I put this to the test today. I added a carousel to a bloc hoping to drag a video to the slide area, like we can with images, sadly it does not work. Deleted the carousel. Inserted a 1920X1080 video bric to Desktop breakpoint. Duplicated the Bloc for Laptop, Table and Mobile. Show or hide the respective blocs.
Encoded mp4 3484X2160 (364 mb) down to 3 different sizes
Insert a 1920X1080 (120 mb) video bric for a Tablet
Insert a 1280X720 (37 mb) video bric for a Laptop
Insert a 720X480 (20 mb) video bric for a Mobile
Works very good in preview. Have not yet uploaded it to the server.
I’ve updated this post to the new Blocs. I no longer duplicate a bloc for each of the breakpoints and hide the others. I use the Drop Method instead for images
I found that encoding my video or optimizing my images to these sizes works well.
2550 X 1667px - Desktop
992 X 661px - Laptop
768 X 512px - Tablet
576 X 384px - Mobile
Personally, whether it’s an image or a video, if it’s a stop size and I want to optimize the image or the photo framing, I create 4 blocks with the visibility of each stop point.
