[For 1.8] Easy Youtube Fix for Responsive videos[CSS]
#1
Photo 
Last week, I was thinking about youtube embedded videos on MyBB forums since they are hard coded to 560x315 dimensions. So if you wish to retain those dimensions on desktop devices and responsive on mobile/tablets, follow this simple tutorial.

1. Go to Admin CP > Templates and Style > Templates> Your Theme Templates > Video Embed Templates > video_youtube_embed
<iframe class="yt_fix" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>

2. Now go to css3.css and paste it at the bottom
@media only screen and (min-width: 768px) {
.yt_fix {
    width: 560px;
    height: 315px;
}
} 


NOTE: I assume that you have proper meta viewport property if you don't then add it to headerinclude template(Admin CP > Templates and Style > Templates> Your Theme Templates >Misc > headerinclude)

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Now your Youtube video will be better on mobile and desktop devices.

Regards
WallBB
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)