Skip to main content

Embedding Responsive Videos

Responsive video embeds are essential for modern web development, ensuring your videos display correctly across all devices and screen sizes. This guide demonstrates how to implement responsive Viostream embeds that automatically adapt to different aspect ratios and viewing contexts.

Responsive Iframe​

By default, Viostream provides responsive iframe embed codes that automatically adapt to different screen sizes and aspect ratios. This is the recommended approach for most use cases.

note

When you use the responsive iframe embed code, it calculates the aspect ratio of the video at that point of time. If you replace the video with a new video that has a different aspect ratio, the video will still play back perfectly. However, the embed will become either pillar-boxed or letter-boxed depending on the change.

Example​

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkgqe"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

Responsive Script​

Script embeds are the most flexible and responsive solution for embedding videos. They use JavaScript to dynamically create the video player and automatically handle responsiveness regardless of the video's aspect ratio.

Whilst it is the most flexible, the responsive iframe is compatible with more CMS and LMS systems and requires less security permissions to work.

Example​

<script src="https://play.dev1.viostream.io/embed/rxqknowrxqkgqe"></script>

Fixed Size Iframe​

For some systems, the only option is to add an iframe. You can use the fixed size iframe embed code. This is not responsive and will not adapt to different screen sizes.

<iframe
  src="//play.dev1.viostream.com/iframe/rxqknowrxqkgqe"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen
  referrerpolicy="strict-origin-when-cross-origin"
  allow="autoplay; encrypted-media; picture-in-picture">
</iframe>

Implement your own responsiveness via iframe​

For advanced users who need custom control over embed behavior, you can implement your own responsiveness on fixed size iframes using the javascript postMessage API.

Include a Viostream iframe on your page and give it an ID​

danger

Do not set a height on your initial iframe. The height will be set dynamically by javascript after the iframe loads.

<iframe
  id="viostream-embed"
  src="//play.dev1.viostream.com/iframe/rxqknowrxqkgqe"
  width="640"
  frameborder="0"
  allowfullscreen
  referrerpolicy="strict-origin-when-cross-origin"
  allow="autoplay; encrypted-media; picture-in-picture">
</iframe>

Use the postMessage API to communicate with the iframe​

tip

We recommend sending a target if you wish to support multiple embeds on the same page.

window.addEventListener("load", () => {
  // Get a reference to the viostream iframe element
  const iframeEl = document.getElementById("viostream-embed");
  // Send a message to the iframe to notify it that the parent is ready
  iframeEl.contentWindow.postMessage(
    {
      topic: "PARENT_ORIGIN",
      payload: window.location.href,
      target: iframeEl.id,
    },
    "https://play.viostream.com",
  );

  // Request the iframe to send its dimensions
  iframeEl.contentWindow.postMessage(
    {
      topic: "GET_DIMENSIONS",
      target: iframeEl.id,
    },
    "https://play.viostream.com",
  );
});

Listen for messages from the iframe​

window.addEventListener("message", (event) => {
  if (event.origin !== "https://play.viostream.com") return;

  const { topic, payload, target } = event.data;
  if (topic === "SET_DIMENSIONS") {
    // Grab the dimensions from the payload
    const { width, height } = payload;
    // Update the iframe size based on the received dimensions
    const iframeEl = document.getElementById(target);
    if (!iframeEl) return;
    iframeEl.style.width = `${width}px`;
    iframeEl.style.height = `${height}px`;
  }
});