WordPress.org

Forums

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

  1. Amanda Giles
    Member
    Posted 9 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: http://worlds.scboston.org/test/
    (use the password "bluefin" to get in)

    https://wordpress.org/plugins/wpmbytplayer/

    Thanks for any help!

  2. Amanda Giles
    Member
    Posted 9 months ago #

    Sorry password was changed to "tickettoworlds"

  3. pupunzi
    Member
    Plugin Author

    Posted 9 months 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.

    Bye,
    Matteo

  4. Amanda Giles
    Member
    Posted 9 months 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
    Member
    Posted 9 months ago #

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

  6. Amanda Giles
    Member
    Posted 9 months 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
    Member
    Posted 6 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
    Member
    Plugin Author

    Posted 6 months ago #

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

  9. Amanda Giles
    Member
    Posted 6 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.

Reply

You must log in to post.

About this Plugin

About this Topic