YouTube videos not responsive

This topic contains 10 replies, has 4 voices, and was last updated by  Paolo 6 years, 6 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #403164

    Maliza
    Expired Member
    Post count: 29

    Hi, I am trying to embed a YouTube video on my site with the Supreme theme. No matter which way I insert the video onto the page, it does not become responsive. Most of my target market is mobile first, so I need to have this responsive.

    I have tried inserting the video as the link, the embed link as well as the iframe, no luck.

    I have also added this code to the CSS, with recommendations found online, but still not luck:
    /* YouTube Responsive CSS for HubSpot */

    .hs-responsive-embed {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    }

    .hs-responsive-embed iframe,
    .hs-responsive-embed object,
    .hs-responsive-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }

    .hs-responsive-embed,
    .hs-responsive-embed.hs-responsive-embed-youtube,
    .hs-responsive-embed.hs-responsive-embed-wistia,
    .hs-responsive-embed.hs-responsive-embed-vimeo {
    padding-bottom: 56.25%;
    }

    #403165

    Kor
    Moderator
    Post count: 16516

    Hi Maliza,

    Please share the URL of the site in question so we can take a better look at it and also WP temp admin access to your site. You can post the details here using the private reply option below.

    #403168

    Maliza
    Expired Member
    Post count: 29
    This reply has been marked as private.
    #403170

    Kor
    Moderator
    Post count: 16516

    Hi Maliza,

    Thanks for your reply. Sorry, I can’t seem to open the URL you’ve shared. Are there restrictions?

    Thanks!

    #403202

    Maliza
    Expired Member
    Post count: 29

    Hi Kor,

    No there are no restrictions. I have sent you the WP login link. the link to the site is just http://www.bizby.co.za.

    #403214

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    #403222

    Maliza
    Expired Member
    Post count: 29

    Hi Kor,

    This doesn’t look right. Please see attached.

    #403229

    Kor
    Moderator
    Post count: 16516

    Hi Maliza,

    That’s how an embed video works, you need to specify a height and width of the iframe. You can adjust the settings I’ve shown above to your liking.

    Thanks!

    #403233

    Maliza
    Expired Member
    Post count: 29

    Hi Kor,

    Yes, that is how a video embed works. I think you are missing my question. My question is, why is the video embed not responsive on the Supreme theme? And how do I get it to be responsive.

    Sorry, but your answer seems a little condescending.

    PS this is not my first website ever, and not my first embed either – else I wouldn’t have come here for advice.

    #403305

    Alex Rollin
    Moderator
    Post count: 27815

    Hello!

    Here’s a fix you could try:

    https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    Let us know how it goes.

    #403308

    Paolo
    Site Admin
    Post count: 31206

    The html mentioned here will not work, unless your html has the same classes.

    Resource linked by Alex should help.

    Thanks

Viewing 11 posts - 1 through 11 (of 11 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket