Responsive issue

  • Resolved Amanda Giles

    (@shedonist)


    10 years, 7 months 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: https://worlds.scboston.org/test/
    (use the password “bluefin” to get in)

    https://www.ads-software.com/plugins/wpmbytplayer/

    Thanks for any help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Amanda Giles

    (@shedonist)

    Sorry password was changed to “tickettoworlds”

    Plugin Author pupunzi

    (@pupunzi)

    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.

    Bye,
    Matteo

    Thread Starter Amanda Giles

    (@shedonist)

    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?

    Thread Starter Amanda Giles

    (@shedonist)

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

    Thread Starter Amanda Giles

    (@shedonist)

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

    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.

    Plugin Author pupunzi

    (@pupunzi)

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

    Thread Starter Amanda Giles

    (@shedonist)

    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: https://worlds2016.com/
    It shows a background image until the video is loaded.

    The whitespace is needed below it for the other content.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive issue’ is closed to new replies.

Tags