Responsive video

vzaar supports responsive video embeds out of the box and here's how you can make the most out of them.

Delivery Settings

You'll find a new option at the bottom of your Delivery Settings called Embed Size that lets you choose between Responsive and Fixed. Change it to Responsive and you'll never have to worry about embed size again!

Settings - Fixed

Video Embed

Embed - Fixed - Cropped
When you embed a video you'll see a new option too — it's the same choice between Responsive and Fixed that defaults to whatever you selected above. It's that simple.

What's more, gone are the days of doing mental arithmetic to select the right width and height because now when you change one, the other updates automatically!

Responsive JavaScript

Finally, if you've already got fixed-size videos embedded on your website you can use jQuery and the FitVids plugin to automatically upgrade your fixed videos to be responsive.

Here's a full example that you can copy and paste before the closing <body> tag on your website to make all vzaar videos responsive:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<script>
  $(document).ready(function(){
    $("body").fitVids({
      ignore: ".video-player-responsive",
      customSelector: "iframe[src*='view.vzaar.com']",
    });
  });
</script>

Still need help? Contact Us Contact Us