XF 1.1 Change embed video size

[Krysteo]

Hello,

Where can I change de default size of the embed videos (Youtube, Vimeo, Dailymotion...).

Thanks

 

[Chris D]

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.

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

Another example, Vimeo:

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

 

[Krysteo]

Thanks

 

[TrevC]

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:

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

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

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]

This is the default YouTube embed HTML. I have added the change you need to make in red:

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

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

 

[Chris D]

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:

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

 

[Dakis]

Thanks Chris, that worked !