Responsive Width / Height Media Embeds

[Chris D]

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...

 

[Russ]

Nice Chris, this is a very well needed resource

 

[Chris D]

Thanks Russ

Actually had this in use for quite some time in the Xen Media Gallery add-on. It wasn't until @Brogan prompted me earlier that I thought to write a little guide to do it.

If anyone wants to see a similar effect in action, just see the videos and resize your browser window at Xen Media Gallery, e.g:

http://xenmediagallery.com/media/africa-into-the-wild-ventribe-youtube.734/

 

[TBDragon]

hmmmm it work fine but didnt work with this site !!
cloudy.ec

<div class="responsiveVideoContainer">
<iframe width="640" height="360" src="https://www.cloudy.ec/embed.php?id={$id}" frameborder="0" allowfullscreen></iframe>
</div>

 

[Chris D]

If it works fine with YouTube but not cloudy.ec then it might be down to that specific service.

 

[FredC]

Finally a Xenporta Fix for videos..

 

[dvsDave]

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]

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.

 

[suppy]

Anyway to edit the code to play HD Quality?

 

[russoroni]

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]

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?

 

[Paul B]

You will need to use media queries to change the size based on the browser width.

 

[Sunka]

Any examples you could give?

 

[Paul B]

All explained here: http://xenforo.com/community/resources/responsive-design.2193/

 

[russoroni]

Had to remove this mod because it messes with the xengallery youtube player.

 

[WearableTechForums.com]

Works great, except it doesn't seem to be compatible with Extra Portal. In Extra Portal, the extra space is reserved, but the video does not increase in size. Any tips?

 

[Paul B]

You would have to ask in the add-on thread.

It may be overriding the code.

 

[Mauricio Macas]

Hi, this tip works with xenforo v1.4.3?

Thanks for the support.

Best regards.

 

[Neil E.]

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.

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

 

[thunderup]

@Chris D is this still a working "add-on" for responsive media?