MyBB Community Forums

In this little tutorial I'll show you how to make your embedded video ifames responsive.

I'll demonstrate it in case of YouTube videos...but it works on same way with all other video mycode templates.

Open the theme template "video_youtube_embed"

<iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>

and replace the whole content with:

<div class="resp_vid_cont">
 <div class="resp_vid">
 <iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Save this themplate changes and open the theme CSS file "global.css" in advanced mode.

Include the following CSS rules into this global.css file:

.resp_vid_cont {
 max-width: 560px;
 height: auto;
 overflow: hidden;
}

.resp_vid {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 0px;
 height: 0;
 overflow: hidden;
}

.resp_vid iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Save this file changes and you're done.

(2018-04-27, 09:53 AM)SvePu Wrote: [ -> ]In this little tutorial I'll show you how to make your embedded video ifames responsive.

I'll demonstrate it in case of YouTube videos...but it works on same way with all other video mycode templates.

Open the theme template "video_youtube_embed"

<iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>

and replace the whole content with:

<div class="resp_vid_cont">
 <div class="resp_vid">
 <iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Save this themplate changes and open the theme CSS file "global.css" in advanced mode.

Include the following CSS rules into this global.css file:

.resp_vid_cont {
 max-width: 560px;
 height: auto;
 overflow: hidden;
}

.resp_vid {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 0px;
 height: 0;
 overflow: hidden;
}

.resp_vid iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Save this file changes and you're done.

Yep, this is great!
I have one question, though: How can I make the video align to the center when viewed on a PC browser? I've tried aligning it with the regular

[align=center]...[/align]

But those are getting ignored.

I've played with the CSS selectors resp_vid_cont, resp_vid, and resp_vid iframe using "align-content:center;" but no joy.

Hi. I'm bumping this thread to see if somebody can give me a hand to resolve this. After applying this tutorial, when users embed videos, and the user needs those centered, the videos are aligned to the left instead. Any assistance would be greatly appreciated.

Friends. I really would like to fix this in my board. I've tried a few things on my own, but I prefer to let you guys help me here. should I post this in the General forum support instead?

Thank you for your tutorial, really useful!

@albano - I am not sure if it is even possible in a simple way...