Video background

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 {
   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="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

Search the site


123 Main Street
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899


Copyright 2023. Blah blah blah Company Limited