Get started with responsive-video-background CDN

MIT licensed

Library adjusts HTML5 video size and position for optimal experience on various screens.

Tags:
  • video
  • background
  • responsive
  • web-component

Stable version

Copied!

How to start using responsive-video-background CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with responsive-video-background CDN - cdnhub.io</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/video.js@7.11.4/dist/video.min.js"></script>
  <script src="https://cdn.cdnhub.io/responsive-video-background/1.2.0/responsive-video-background.js"></script>
</head>
<body>
  <video id="my-video" class="rvb" preload="auto" poster="path/to/poster.jpg">
    <source src="path/to/video.mp4" type="video/mp4">
    <source src="path/to/video.webm" type="video/webm">
  </video>
  <script>
    const myVideo = document.getElementById('my-video');
    const options = {
      autoplay: true,
      loop: true,
      muted: false,
      responsive: true,
      backgroundColor: '#000',
    };

    const player = videojs(myVideo, options);
    responsiveVidBg.init(player);
  </script>
</body>
</html>
Copied!
Copied!

All versions