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

Discussion in 'XenForo Questions and Support' started by Krysteo, Sep 11, 2012.

  1. Krysteo

    Krysteo Member


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

  2. Chris D

    Chris D XenForo Developer Staff Member

    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>
    Phil and Jake Bunce like this.
  3. Krysteo

    Krysteo Member

    Chris D likes this.
  4. TrevC

    TrevC Well-Known Member

    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"  />
    2) Apply new styles to maintain 100% width with a (mostly) correct aspect ratio:
        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.
    lightbox, Dakis and Jake Bunce like this.
  5. Dakis

    Dakis Well-Known Member

    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?
  6. Chris D

    Chris D XenForo Developer Staff Member

    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:

    Andrej likes this.
  7. Dakis

    Dakis Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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>
    Dakis likes this.
  9. Dakis

    Dakis Well-Known Member

    Thanks Chris, that worked ! :)
    Chris D likes this.

Share This Page