[For 1.8] make youtube videos responsive
#1
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.


Attached Files Thumbnail(s)
       
My forum powered by MyBB https://alhimika.net/forum/
Reply
#2
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]
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)