Puro themes make use of FitVids by built by Chris Coyier and Paravel. FitVids ensures that any videos you embed will dynamically adjust to the screen size they are being viewed on. In short, FitVids makes your videos scale to mobile devices.
FitVids also results in videos being loaded at 100% of their container width. There are times when this is too wide and you’d rather your video loaded at the size you chose when creating the embed code. It’s possible to create a child theme at this point and completely remove FitVids. This isn’t always ideal though as you lose out on its benefits for all the other videos you might be embedding. It’s possible to deactivate FitVids for a single video by wrapping your embed code in a div with a specific class, here’s how. In the Classic Editor when editing a post or page, click over to the Text tab found next to Visual at the top right corner of your editor. Insert the following:
<div class="fitvidsignore"> <!-- Insert video embed code below this line --> </div>
And that’s it, the video embedded within the fitvidsignore div will render at the size you chose when creating the embed code on YouTube or Vimeo.
Here is how it would look with an embed code inserted:
<div class="fitvidsignore"> <!-- Insert video embed code below this line --> <iframe src="//player.vimeo.com/video/108650530?title=0&byline=0&portrait=0&badge=0&color=ffffff" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/108650530">Wanderers - a short film by Erik Wernquist</a> from <a href="http://vimeo.com/user13714879">Erik Wernquist</a> on <a href="https://vimeo.com">Vimeo</a>.</p> </div>
In the event you’re using SiteOrigin’s Page Builder plugin, the same will apply, except you’ll be using either the Text widget or the Text tab of the Visual Editor widget.