Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #966798

    Hello,

    I’m sure someone has asked this question before, but I couldn’t find a solution on the forum. I am running several sites using the Enfold theme and have noticed that whenever I try to embed a YouTube video using the the “Add Media” button on a blog post, that the video shows up as a tall rectangle rather than in a 16:9 ratio. I only have this problem with YouTube videos. Vimeo videos work fine. Is there code I can add to correct the YouTube ratio throughout the entire site? Thanks!

    #967611

    Hey Kirstie,
    I see you are using version 4.4, please update to v4.4.1, and if this doesn’t help, Can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    #967885

    I updated to v4.4.1, but everything still looks the same. I am having this same issue across multiple Enfold sites, but this is the one with the most videos.

    #970423

    Hi MattJensenMarketing,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    #971240

    Please see Private Content area

    #971522

    Hi,
    You could set a standard size for your videos with this css in the Enfold Theme Options > General Styling > Quick CSS field

    iframe[src*=youtube] {
    	    width: 560px!important; 
    	    height: 315px!important; 
    }

    or if you want your videos to be responsive try using percentages like this:

    iframe[src*=youtube] {
    	    width: 100%!important; 
    	    height: 98%!important; 
    }
    

    in my tests this worked out to be very close to the 16:9 ratio.
    but feel free to adjust to suit.

    Best regards,
    Mike

    #978056

    Thank you for getting back to me! I do want the videos to be responsive, so I added the code to my custom css:

    iframe[src*=youtube] {
    	    width: 100%!important; 
    	    height: 98%!important; 
    }

    But now the videos are cut off on the top on bottom. I tried out a few different percentages, but I still get the same effect.

    #978104

    Hi MattJensenMarketing,

    Try the code like this

    
    iframe[src*=youtube] {
        width: 100%!important;
        height: 98%!important;
        min-height: 450px;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #978148

    That code worked for desktop, but the sides got cut off on mobile. I did some more poking around and was able to create a solution that worked. Thought I’d share in case any one else is having this problem!

    .embed-youtube {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    .embed-youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    • This reply was modified 6 years, 3 months ago by MJM.
    #978217

    Hi,
    Thank you for sharing your solution, I’m sure this will be helpful.
    Unless there is anything else we can help with, shall we close this then?

    Best regards,
    Mike

    #978451

    Yes, it can be closed. Thanks!

    #978685

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Aspect Ratio of Embedded YouTube Video’ is closed to new replies.