Full width background video

Full-width videos can give your web page an immersive experience.

With Sirv video streaming, your video will be served at the most appropriate resolution for each users' device, in short segments, for the fastest possible load time. It will be lazy-loaded, so the video will only download if it enters the users' viewport, saving bandwidth and meeting web development best-practice.

Embed a full-width background video

Below is a simple way to add a background video. It would be best implemented by your web developer, styled to meet your exact design requirements.

1. Start by adding Sirv JS to your page:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

2. Add your Sirv video in the normal way (with a div). Add the tag data-options with settings for fullscreen, autoplay, loop and controls, like so:

<div class="Sirv bg-placeholder" data-options="fullscreen.enable:false">
 <div data-src="https://demo.sirv.com/demo/Trinity.mp4" data-options="autoplay:true; controls.enable:false; loop:true"></div>
</div>

3. Wrap another div around your code. This div has a class named video-banner:

<div class="video-banner">
 <div class="Sirv bg-placeholder" data-options="fullscreen.enable:false">
  <div data-src="https://demo.sirv.com/demo/Trinity.mp4" data-options="autoplay:true; controls.enable:false; loop:true"></div>
 </div>
</div>

4. If you want to overlay some content on your video, add another div. This example adds a div with a class named video-banner-text, containing a paragraph of text:

<div class="video-banner">
 <div class="Sirv bg-placeholder" data-options="fullscreen.enable:false">
  <div data-src="https://demo.sirv.com/demo/Trinity.mp4" data-options="autoplay:true; controls.enable:false; loop:true"></div>
 </div>
 <div class="video-banner-text">
  <p>Some content can go here - it will be overlaid on video.</p>
 </div>
</div>

You can overlay whatever HTML you wish - text, headings, links, images etc.

5. Add some CSS to your page, to style the layout and the text. The CSS below will style the classes video-banner and video-banner-text to use the full width. The other styles will customize the default Sirv Media Viewer classes, to better suit a background video:

.video-banner {
 position: relative;
}
.video-banner-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 4.5vw;
 color: #fff;
 z-index: 1080;
}
.video-banner .Sirv.bg-placeholder {
 aspect-ratio: 1276 / 532;
}
.Sirv.bg-placeholder .smv-loader {
 opacity: 0;
}
.Sirv.bg-placeholder .smv-sirv-video video[autoplay] ~ .vjs-poster {
 opacity: 0;
}
.smv-sirv-video .vjs-tech {
 height: auto;
}
.smv-sirv-video video[autoplay]~.vjs-big-play-button {
 opacity: 0;
 pointer-events: none;
}
.smv-sirv-video video[autoplay]~.vjs-loading-spinner {
 display: none;
}

Your web developer can adjust the styles to meet your needs.

Full page width background video

Open the example below to see a 100% full page width background video:

Full-width background video

Inspect the HTML source code of that page to see how it was created, with HTML, CSS and Sirv video streaming.

FAQ

Can I use a video tag instead of a div?

To use video streaming, your video must be in a div. If you use a video tag instead, then the original file will be served. It won't be served at the most optimal resolution, with lazy loading and in segments, but if your video was well-optimized before it was uploaded to Sirv, then this approach can be fine.