Responsive Width / Height Media Embeds

Responsive Width / Height Media Embeds

Chris D

XenForo developer
Staff member
Chris Deeming submitted a new resource:

Responsive Width / Height Media Embeds - Instructions to make embedded media more responsive.

Media embeds are typically a fixed width when embedded into posts:

View attachment 66284

This guide will show you how to make these videos much more responsive (in width and height) with the end result looking like this at full width:

View attachment 66283

Or at smaller widths:

View attachment 66285

Or even smaller!
View attachment 66286

The steps to follow are simple. Although in this example it demonstrates YouTube, you can in theory apply this to any media site...

Read more about this resource...
 
hmmmm it work fine but didnt work with this site !!
cloudy.ec
HTML:
<div class="responsiveVideoContainer">
<iframe width="640" height="360" src="https://www.cloudy.ec/embed.php?id={$id}" frameborder="0" allowfullscreen></iframe>
</div>
 
If it works fine with YouTube but not cloudy.ec then it might be down to that specific service.
 
Been trying to set a max width, but it just keeps clipping the height when I set a max-width, even if I comment out the overflow line. (when I do that, each post goes to a seriously tall size) Any CSS Ninja's out there who've figured this out?
 
The only way I've found so far to do this is to put another div around the embed HTML with a different class.

Then apply a max-width to that container. That should give a better result on fluid widths. Equally a % left / right margin would work too.
 
Just wanted to report that this didn't work until I put the css into the uix.responsive.css. I'm still running 1.2.4 and when I upgraded to it this has been happening alot ever since. Probably something I broke lol.
 
On mobile it looks fantastic, but on my laptop all youtube embed videos are full size screen then. How to make that on laptop videos look normal (cllasic fixed width), but on mobile or tablet screen videos have responsive design?
 
A couple of folks have asked about a maximum width. I changed one line of the code in EXTRA.css and it seems to function OK for me. The width: 100%; is now width: 800px !important; and the responsive function still works well on smaller screens.

Code:
.responsiveVideoContainer iframe
{
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 800px !important;
    height: 100%;
}
 
Top Bottom