Load background video depending on screen size

[vtheod]

Hey all!

I wanted to make a suggestion about adding background videos.

Since a video's file size raises significant the page's loading time, I came up with a solution where with a few lines of javascript I can load different video files depending on the screen size. So I use a high resolution video file for desktops and a low resolution one for mobiles that has a low impact on page loading time.

If this is something that you find interesting, and you'd like to add it in astroid, I could share the code.

Cheers

[Chacapamac]

I think this is the Professional way to use background video. This will add a Pro touch to Astroid... Great Stuff!

[vtheod]

Thanks @Chacapamac I'd like to hear from @sonvnn if it is something that could be implemented in astroid.

[Chacapamac]

You're Welcome @vtheod — I add the label “enhancement” Good Day to All!

[sonvnn]

@vtheod Thank you for your idea. I am interest with this. May you share your code? I just busy in this week for a company project. I will back with Astroid in the next week.

Best Regards, Sonny

[vtheod]

I'm glad you like the idea, so here is the code.

The HTML:

<video class="headervideo" loop="" autoplay="" muted="" poster="path/to/poster_image" playsinline="" data-desktop-vid="path/to/desktop_video_file" data-mobile-vid="path/to/mobile_video_file"></video>

The Javascript:

var video = document.querySelectorAll('video') function addSourceToVideo(element, src) { var source = document.createElement('source'); source.src = src; source.type = 'video/mp4'; element.appendChild(source); } function whichSizeVideo(element, src) { var windowWidth = window.innerWidth ? window.innerWidth : $(window).width(); if (windowWidth > 721) { addSourceToVideo(element, src.dataset.desktopVid); } else { addSourceToVideo(element, src.dataset.mobileVid); } } function videoSize() { if (video !== undefined) { video.forEach(function(element, index) { whichSizeVideo( element, element ); }); } } videoSize();

Maybe we could use the same approach with images too.

Cheers

[Chacapamac]

Image can use the srcset way.

Different cool ways to use srcset https://stackoverflow.com/questions/28364118/responsive-images-img-srcset-bootstrap-wrong-size-image-gets-loaded

• Different images by Device <img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />

In case you can set the width in CSS, you can also use lazySizes to automatically calculate the sizes for you. https://github.com/aFarkas/lazysizes <img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />

======================================================================= The ONLY problem I see in the integration of the srcset (e.g JCE Editor let you use srcset) and also the simple insertion of any web image (like in Astroid template manager) is the manipulation & compression of the images. In a CMS, It will be great if any type of image optimization or manipulation is built in the interfaces to facilitate the user to built great efficient visuals.

— As example, JCE permit to upload and manipulate the size, cropping, rotation and even setting the srcset method to optimize images on upload and insertion. The big problem is the optimization or compression of images in inserting & manipulating them. It always sucks. Any manipulation done by JCE will generally augment, by a lot..., the weight of a professionally compress image or an image simply drag and drop in Squoosh (the free incredible Google develop online compressor). — I see the same problem with all Joomla components and editors that manipulate images.

https://squoosh.app/

Squoosh is also on Github and have is own API & CLI that can be use to integrate its incredible power in any web project https://github.com/GoogleChromeLabs/squoosh

Imagine if you can integrate the Top Notch Squoosh optimisation to Astroid images insertion or even create a Joomla plugin that will permit the same Squoosh compression power (and maybe also the direct manipulation (Size, Crop, srcset...) to Joomla. — Note: Maybe that plugin can be easily put “On” in the Astroid Framework???

[vtheod]

Unfortunately, srcset is not working for background images. If squoosh could be implemented in Joomla, that would be great!

[Chacapamac]

Yes, you wright, for background, it’s limited —> https://dev.to/ingosteinke/responsive-background-images-with-image-set-the-srcset-for-background-image-259a Will be better in CSS4...

For the compressor, I was thinking as an added compressor/resizer for any images downloads or use in Astroid or Joomla. https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh. When compress, you can use them how you want.

Note: The API libSquoosh has an experimental auto optimizer that compresses an image as much as possible, trying to hit a specific Butteraugli target value. The higher the Butteraugli target value, the more artifacts can be introduced.

From my experience, the quality and degree of optimisation from Squoosh is so great that it become almost unnecessary to use different size images, jpg and png alike.

[Chacapamac]

@vtheod — For the videos, do you think your script be adapted to respond to Bootstrap normal media queries? — I’m looking for that....

[vtheod]

Hey @Chacapamac! You can add the bootstrap breakpoints very easy in the script by creating an if statement for each one.

[Chacapamac]

Thanks @vtheod. Yeah that will be great, optimization is so important now and video are so great to pass messages to visitors. The only draw back is exactly that, the size and bandwidth.

Having a special input in Astroid Template Manager for choosing specific background videos depending on the screen size/bootstap breakpoints will be really cool. It will be a really pro feature.

Being able to use that for image will be great also, if my memory is good JCE Editor give you the possibility when editing, but having that same choice for background image in the Astroid Template manager will be also cool.

I will see the feature as a choice, meaning that the user can use one video for all screen size (because it’s easy) or decide to go to the more efficient pro way of one video by screen size.