To add a video background to a cover block we add a class like .vimeo-wrapper, then we need some CSS and jQuery.
note: this is for a Vimeo video, we have notice youtube branding appear when we tried it, so Vimeo seems better for now. Also it is only loading on screens bigger than 1024 so the panel should have a background image for smaller screens (or if the jQuery didn’t load ).
If you need multiple video backgrounds you could set multiple classes and lines of jQuery.
.vimeo-wrapper {
position:relative;
width: 100%;
height: 46%;
z-index: -1;
pointer-events: none;
overflow: hidden;
iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
}
}if ($(window).width() > 1024) {
$('.vimeo-wrapper').append( '<iframe src="https://player.vimeo.com/video/473481637?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}