[For 1.8] make youtube videos responsive

[Alhimika]

Hi! 
not sure if this was covered or not. 

Recently I came up with the problem. 
Even using responsive theme when inserting youtube videos they were still not responsive and looked really bad on any mobile phone. 

Checking the code I've seen they are inserted using iframe with some certain width and height. 

So here is not ideal, but an easy fix I came up with 

Adding this code to your global.css

iframe {
width: 100%    !important;
max-width: 560px; !important;
  }

may look good on your mobile, but way too stretched  on desktop

Hence I added

max-width: 560px  - makes no difference on a mobile, but will not be overstretched on your desktop


Hope this helps someone

Please see before/after screen attached

P.S bear in mind this will affect any iframe, not just youtube.

[[ExiTuS]]

Better use this solution for responsive video elements (also respecting 16:9 ratio):

Example YouTube

Template: video_youtube_embed

<div class="video_container">
<iframe class="video_iframe" src="//www.youtube.com/embed/{$id}" allowfullscreen></iframe>
</div>

Style: global.css

.video_container { position: relative; overflow: hidden;width: 100%; padding-top: 56.25%; }
.video_iframe { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; }

[ExiTuS]

[Michael2014]

Better use this solution for responsive video elements (also respecting 16:9 ratio):

Example YouTube

Template: video_youtube_embed

<div class="video_container">
<iframe class="video_iframe" src="//www.youtube.com/embed/{$id}" allowfullscreen></iframe>
</div>

Style: global.css

.video_container { position: relative; overflow: hidden;width: 100%; padding-top: 56.25%; }
.video_iframe { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; }

[ExiTuS]

There is a problem with this solution, and the original op, is also correct and here is why, so many videos are coming out, like Rumble, and Odysee, that all use embedded videos. So there has to be method to style iframes

the original OP solution is perfect.