How can I stop my video displaying at full width?

SiteOrigin themes use FitVids, “A lightweight, easy-to-use jQuery plugin for fluid width video embeds.” FitVids ensures that your videos, once embedded into your site, dynamically resize to best fit the screen they are being viewed on.

There are however times when you’d like your video to render at a particular size and full width isn’t suitable. This can happen if you’re using a full width layout with no sidebar for example. In the past we’ve used a child theme to completely remove the FitVids script. This isn’t the best solution as it means losing responsiveness on all your embedded videos.

So, to de-activate FitVids for a single video, follow these instructions:

A: Using Page Builder:

1. Use a Text widget to insert your video.
2. Before inserting the embed code provided by YouTube/Vimeo etc, insert the following:

<div class="fitvidsignore">
</div>

3. Insert your video embed code between the opening and closing div tags. For example:

<div class="fitvidsignore">
<iframe src="//player.vimeo.com/video/70085345" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <a href="http://vimeo.com/70085345">Cabrinha 2014 Teaser</a> from <a href="http://vimeo.com/cabrinhakites">Cabrinha Kites</a> on <a href="https://vimeo.com">Vimeo</a>.
</div>

FitVids will now know to ignore that video, allowing it to be rendered at the size you selected when creating the embed code.

B: Not using Page Builder

Start at step 2 above. Instead of inserting a Text widget just click over to the Text tab, found next to Visual at the top right of the WordPress editor. The steps are then the same.

OR

C: De-activate FitVids Globally

If you’re running our Vantage theme you can now de-activate FitVids globally from Appearance > Theme Settings > Layout > Enable FitVids.js. This isn’t an ideal solution as you’ll lose out on dynamic resizing of your videos on different devices. We can however imagine several instances where this might be suitable. The new setting means that the choice is now in your hands and you no longer need a child theme to globally de-activate FitVids.

If you have any questions on this particular topic, feel free to post below.

URL: https://github.com/davatron5000/FitVids.js