mb.YTPlayer for background videos
[resolved] Responsive issue (9 posts)

  1. Amanda Giles
    Posted 1 year ago #

    I'm trying to have a full width responsive background video.

    [mbYTPlayer url="https://www.youtube.com/watch?v=dveyL5y67pY" opacity="1" quality="highres" ratio="auto" isinline="true" playerwidth="1903" playerheight="1137" showcontrols="true" realfullscreen="true" printurl="false" autoplay="true" mute="true" loop="true" addraster="false" gaTrack="false"]

    If I don't specify a height and width, I get a tiny video, but if I specify a large height and width, the video is too large on narrower widths (even when I try applying a max-width on the iframe).

    What is the best way make this video handle responsively with this plugin?

    The page is here: http://worlds.scboston.org/test/
    (use the password "bluefin" to get in)


    Thanks for any help!

  2. Amanda Giles
    Posted 1 year ago #

    Sorry password was changed to "tickettoworlds"

  3. pupunzi
    Plugin Author

    Posted 1 year ago #

    Hi Amanda,
    Taking a look at the page you post it seams to work fine for me...
    Maybe your issue is to maintain the aspect ratio of the video container once the window is resized...

    Actually, if the video containment is set as "self", the width must be defined in pixel and can't be as percentage, so it can't be responsive... I can see to make this behavior more cleaver for the next release.


  4. Amanda Giles
    Posted 1 year ago #

    What width are you looking at it in? When I look at a wider width of 1903 on Firefox, it looks fine, but if I narrow my browser to 1000 and refresh the video is now twice as wide and not centered (you can tell by the text "100 Years of" should be completely visible at the start and not cut off.

    What do you mean by: video containment is set as "self"

    If I narrow my window, it also does not shrink. Something about the JS code which is setting the width and height on resize does not seem to be working for me. I am guessing it's some other setting/style conflicting.

    The "wrapper" element is the right size, but the iframe within it is still a much larger width.

    Is there a different value I should pass in to avoid a hard-coded width?

  5. Amanda Giles
    Posted 1 year ago #

    So, is it only responsive when the video is in the background and not inline?

  6. Amanda Giles
    Posted 1 year ago #

    Thank you so much for looking at it, by the way. I appreciate the guidance, even if the answer is that the plugin doesn't do that yet. :)

  7. lydwolf1
    Posted 11 months ago #

    It would be way better if the video was full screen below the header anyway. I am seeing it leave a white space at the bottom of the page. I am using Chrome.

  8. pupunzi
    Plugin Author

    Posted 10 months ago #

    It should not have any white space; probably a CSS conflict with your web page.

  9. Amanda Giles
    Posted 10 months ago #

    The design is for the video to be full width, but not full background. Whitespace is desired and expected below the video. I got it working by jumping through a number of hoops.

    The final version can be seen here: http://worlds2016.com/
    It shows a background image until the video is loaded.

    The whitespace is needed below it for the other content.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic