Youtube Video not being contained by element and breaking mobile view

I added a Youtube video to my site, http://athletesrise.com/ , but the video is not shrinking with the layout.
The video breaks the element container to make everything else even smaller while the video stays full width. How do I fix this?

  • Adam Czajczyk
    • Support Gorilla

    Hello Johnny,

    I hope you're welll today!

    I took a look at your site's source code. The video size isn't being scaled because it's an <iframe> element of the defined width of 870 pixels and height of 540 pixels. The fact it's not being resized is actually theme independent as the <iframe> code is set to keep this fixed width and height.

    You may want to edit the embed code and instead of the current <iframe> code try one of these solutions:

    1. replace

    <iframe width="870" height="530 ....

    with

    <iframe style="width:100%;height:auto;" ...

    2. You may want to try standard WordPress "embed" feature. Instead using an entire YouTube embed code, just copy an URL of a page with this video and then add this like that:

    [embed]http://this.is.your.video.page.url[/embed]

    I hope that helps!

    Cheers,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Johnny,

    Thanks for this but I'm afraid it doesn't work. I can see my "special button" to access your site anywhere. This usually means that the support hadn't been granted.

    Let me then just sum it up for you:

    - please make sure that the domain of the site in question is registered with your WPMU DEV account
    - login to your site as a super-admin
    - go to "WPMU DEV" -> "Support" page -> "Support Access" tab
    - click on the "Grant access" button

    and let me know I should check again :slight_smile:

    Cheers,
    Adam

  • Predrag Dubajic
    • Support

    Hi Johnny,

    Thanks for clearing that up, I was able to access your site from that second account and have added new youtube element, removed the old one and added this CSS code to your site:

    .upfront-youtube-container {
        position: relative;
        padding-bottom: 60%;
        height: 0;
        overflow: hidden;
    }
    
    .upfront-youtube-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    It should be showing normally on all screen sizes now so could you please test it and confirm that it's working?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.