MyBB Community Forums

Full Version: Easy Youtube Fix for Responsive videos[CSS]
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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
(2022-05-15, 07:28 AM)matthewdaniel69 Wrote: [ -> ]But Its still don't work for me

You could try this => https://community.mybb.com/thread-217215.html