Make YouTube Videos Responsive

Hello,

Is it possible to make the YouTube videos on this site, such as the one below, resized smaller when viewed on a mobile device? I am using the WP Video Lightbox plugin.

http://m40.siteground.biz/~heartcor/theaumnation.com/wellness-services/name/the-aum-shop/

Thanks in advance,

Casper

  • James Morris
    • WordPress Enthusiast

    Hello Casper,

    I hope you are well today.

    The trick with this plugin is to specify a width and height of 100%. This will make the image responsive.

    Here’s the shortcode I used:

    [video_lightbox_youtube video_id="qCwJPW78iEM" width="100%" height="100%" anchor="http://mytestsite.tld/wp-content/uploads/2017/03/wpmudevimage.png"]

    Screenshots:

    Desktop – https://goo.gl/FhocVv

    Mobile – https://goo.gl/yeIH2U

    I hope this clarifies a bit. Let us know if you have any further questions. We’ll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • Casper
    • Syntax Hero

    Hi James,

    I have this CSS in place to make the thumbnails larger on desktops.(They are pretty tiny if I don’t use it for some reason; perhaps due to the Connections Pro directory listing program I am using).

    If I make a media query so that this CSS is for desktops only and go with the 100% width would that do the trick for mobile displays?

    /*Increase Video Lightbox Thumbnail Size*/

    .wpvl_auto_thumb_box {

    width: 450px;

    height: 337px;

    }

    /*Increase Video Lightbox Thumbnail Size*/

    .video_lightbox_auto_anchor_image {

    width: 600px;

    height: 450px;

    }

    /*Move Video Lightbox Play Button*/

    .wpvl_auto_thumb_play{

    left: 201px;

    top: 144px;

    }

    Thanks in advance,

    Casper

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.