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

Responsive Width / Height Media Embeds

Instructions to make embedded media more responsive.

  1. Chris D

    Chris D XenForo Developer Staff Member

    Chris Deeming submitted a new resource:

    Responsive Width / Height Media Embeds - Instructions to make embedded media more responsive.

    Read more about this resource...
     
    Bram, Mirovinger and Bob like this.
  2. Russ

    Russ Well-Known Member

    Nice Chris, this is a very well needed resource :)
     
    Chris D likes this.
  3. Chris D

    Chris D XenForo Developer Staff Member

  4. TBDragon

    TBDragon Active Member

    hmmmm it work fine but didnt work with this site !!
    cloudy.ec
    HTML:
    <div class="responsiveVideoContainer">
    <iframe width="640" height="360" src="https://www.cloudy.ec/embed.php?id={$id}" frameborder="0" allowfullscreen></iframe>
    </div>
     
  5. Chris D

    Chris D XenForo Developer Staff Member

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

    FredC Well-Known Member

    Finally a Xenporta Fix for videos..
     
  7. dvsDave

    dvsDave Well-Known Member

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

    Chris D XenForo Developer Staff Member

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

    suppy Member

    Anyway to edit the code to play HD Quality?
     
  10. russoroni

    russoroni Active Member

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

    Sunka Well-Known Member

    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?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    You will need to use media queries to change the size based on the browser width.
     
    Sunka likes this.
  13. Sunka

    Sunka Well-Known Member

    Any examples you could give?
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

  15. russoroni

    russoroni Active Member

    Had to remove this mod because it messes with the xengallery youtube player.
     
  16. 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?
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

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

    It may be overriding the code.
     
  18. Mauricio Macas

    Mauricio Macas New Member

    Hi, this tip works with xenforo v1.4.3?

    Thanks for the support.

    Best regards.
     
  19. Neil E.

    Neil E. Active Member

    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.

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

    toodlez Active Member

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

Share This Page