• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.1 Change embed video size

Chris D

XenForo developer
Staff member
#2
These are set individually for each service...

Admin CP > Home > BB Code Media Sites

In the case of YouTube, the embed code looks like this. Just change the red numbers accordingly.

Code:
<iframe width="500" height="300" src="http://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Another example, Vimeo:

Code:
<iframe src="http://player.vimeo.com/video/{$id}" width="500" height="300" frameborder="0"></iframe>
 

TrevC

Well-known member
#4
Here's a handy technique if you want nice responsive/full-width video embeds instead of a fixed size:
1) Remove all width and height references from the "BB Code Media Sites" entries that Chris pointed out. Add a new wrapping element around each of them called "video" or something similar. Your new entries should look something like this:
HTML:
<div class="video">
<object data="http://www.youtube.com/v/{$id}&amp;fs=1" type="application/x-shockwave-flash">
    <param name="movie" value="http://www.youtube.com/v/{$id}&amp;fs=1" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="opaque" />
    <embed src="http://www.youtube.com/v/{$id}&amp;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"  />
</object>
</div>
2) Apply new styles to maintain 100% width with a (mostly) correct aspect ratio:
HTML:
.video{
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 56.25%; /* Helps maintain a correct aspect ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video object, .video iframe, .video embed
{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
If you want more details, here's an article discussing this trick.

The end result scales nicely down to phone-sized screens.
 

Dakis

Well-known member
#5
I'm trying to get this to work but display by default HD version of the video. I've tried adding "&hd=1" and "&vq=hd720" with no success.

Any ideas?
 

Chris D

XenForo developer
Staff member
#6
This is the default YouTube embed HTML. I have added the change you need to make in red:

Code:
<iframe width="500" height="300" src="http://www.youtube.com/embed/{$id}?wmode=opaque&vq=hd720" frameborder="0" allowfullscreen></iframe>
The other parameters it accepts are:

&vq=small
&vq=medium
&vq=large
&vq=hd1080
 

Dakis

Well-known member
#7
Thanks Chris, already tried adding that in the above code that makes video display responsive, but it doesn't work for me.
 

Chris D

XenForo developer
Staff member
#8
Yeah it doesn't work with the old embed code.

You'd need to use TrevC's CSS, but the embed HTML should be this:

Code:
<div class="video">
	<iframe src="http://www.youtube.com/embed/{$id}?wmode=opaque&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>