XF 2.1 Increasing the size of embedded videos

[Martok]

I would like to increase the size of embedded videos in XenForo 2.1. The current size of the likes of YouTube (560 x 315) seems to be a bit small, so I thought I'd change it to 800 x 450.

From what I can tell, the way you do this is to edit the relevant template in your style, in this case _media_site_embed_youtube. I did this and replaced width="560" height="315" with width="800" height="450" then saved the template.

Checking one of the pages I have a video on, I noticed that the video still displayed at 560 x 315, not 800 x 600. Inspecting the code and I can see the change has happened:



However, further down I can see:




I then discovered that the template core_bbcode.less has the following code in it:

.bbMediaWrapper,
.bbMediaJustifier
{
    width: 560px;
    max-width: 100%;
    margin: 0;

and it appears to control the width of the video. Changing width to 800 and the video then appears at the size I wanted. However changing it to any other size will then display videos in that size. Removing it altogether means the video sizes itself to the width of the post.

So it seems that that changing the _media_site_embed_youtube template has no effect, yet this is what I assumed it is there for, to alter media sites as desired, especially if you wanted videos from say YouTube, Twitch and Vimeo all displaying at different widths. Instead this is overridden by the code in core_bbcode.less.

Am I missing something here? Or is this a bug?

 

[Mike]

No, this is roughly what's expected -- the CSS has priority. The HTML size would be applied if the CSS isn't applied for some reason.

If you want to override for specific sites, you can change the width at the bbMediaWrapper element level (via style="width: 800px" for example).

 

[Martok]

No, this is roughly what's expected -- the CSS has priority. The HTML size would be applied if the CSS isn't applied for some reason.

What sort of circumstances would this be? From the most part, as far as I can see this doesn't happen, certainly not in messages anyway.

If you want to override for specific sites, you can change the width at the bbMediaWrapper element level (via style="width: 800px" for example).

Is this maybe an area that could be looked at for improvement?
It seems to me at least that the obvious way to configure media site display sizes is individually in the _media_site_embed_XXX templates, yet this is actually controlled for all sites in core_bbcode.less unless you start modifying for individual sites as you suggested (I'm guessing in EXTRA.less).

 

[AndyB]

Add this to the extra.less template:

// embedded media width

.bbMediaWrapper,
.bbMediaJustifier {
	width: 900px;
}

 

[Martok]

Add this to the extra.less template:

// embedded media width

.bbMediaWrapper,
.bbMediaJustifier {
    width: 900px;
}

Yes, I know you can do that (though in my case I just edited the core_bbcode.less template in my style). The point is that it wasn't intuitive as to how to change the media sites as the obvious place is to edit the height and width elements in the code for each media site. Then should anyone want to have different sized videos for each media site for any particular reason, they'll have to fiddle further to do this. Hence my suggestion that this might be an area for improvement in the future.

 

[avalanch]

Add this to the extra.less template:

// embedded media width

.bbMediaWrapper,
.bbMediaJustifier {
    width: 900px;
}

Very nice, however I notice that if I change that to 100% vs 900px, the height also changes? I would like it to be more of the size of that they are on "amp pages".

A

XF 2.2 Thread 'Enlarge the bbcode of youtube videos'

Feb 16, 2024

I would like to enlarge the video size of the youtube video embeds to go from what it is now to this size when browsing a "amp" url. It also remains responsive, what changes to the bbcode or elsewhere, should I make?



Partial fix found.

• avalanch
• Replies: 0
• Forum: Styling and customization questions