• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Responsive Width / Height Media Embeds

Responsive Width / Height Media Embeds

Chris D

XenForo developer
Staff member
#1
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...
 

TBDragon

Active member
#4
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>
 

dvsDave

Well-known member
#7
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?
 

Chris D

XenForo developer
Staff member
#8
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.
 

russoroni

Active member
#10
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.
 

Sunka

Well-known member
#11
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?
 

Neil E.

Active member
#19
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%;
}