Resizing video in a column to fit mobile screens

Hi there,

I have a video embedded at the top of my home page, which is stretching the homepage on mobile view. I need the embedded video to resize on a mobile, to be no wider than the screen. Can you help me with the best way to code that?

I’m using SiteOrigins and have the video in the right-hand column of a two-column row. It’s embedded via a SiteOrigins ‘Text’ widget, using the following code:

<div class="fitvidsignore">

<iframe src="https://www.youtube.com/embed/C0DPdy98e4c" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

…I got that code from this SiteOrigins guide: https://siteorigin.com/thread/how-can-i-stop-my-video-displaying-at-full-width/

I found threads about this on SiteOrigins forums which advised contacting theme developers. I also found a similar question and solution here: https://www.ads-software.com/support/topic/changing-size-of-embedded-video-post-summary/?replies=10

…But I’m not sure to adapt that for this situation? What class do I need to call in the code to ensure that the video resizes to fit that column of a row, on mobile devices?

https://tracydempsey.co

Many thanks!
Tracy

• This topic was modified 7 years, 10 months ago by Tracy.