Video loading

by Anton

HTML

<div id="home-banner-wrap" class="video-wrap">
    <video id="home-banner-video" muted loop playsinline>
        <source src="" type="video/mp4">
    </video>
</div>

CSS

.video-wrap {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(https://iplanworld.com/wp-content/uploads/2019/05/home-vid.jpg);
    background-size: contain;
}
video#home-banner-video {
    opacity: 0;
    transition: opacity 1s;
    width: 100%;
    height: 100%;
}
@media only screen and (min-width: 768px) {								    .video-wrap {						    background-image: url(<?php echo $Poster['url']; ?>);
    }
}

JavaScript

jQuery(document).ready(() => {
									const isMobile = jQuery(window).width() < 768;
									const video = jQuery('#home-banner-video');
									video.find('source').attr('src', 'https://iplanworld.com/wp-content/uploads/2019/04/iPlan_web-video_HD.mp4');
									video[0].load();
                                    .play()
										.then(() => video.css('opacity', 1));
								});