Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 4, 2018 at 9:03 pm #966798
    MJM

    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!

    June 6, 2018 at 4:52 am #967611
    Mike

    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

    June 6, 2018 at 3:10 pm #967885
    MJM

    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.

    June 9, 2018 at 3:01 pm #970423
    Victoria

    Hi MattJensenMarketing,

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

    Best regards,
    Victoria

    June 11, 2018 at 3:27 pm #971240
    MJM

    Please see Private Content area

    June 12, 2018 at 5:56 am #971522
    Mike

    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

    June 26, 2018 at 6:09 pm #978056
    MJM

    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.

    June 26, 2018 at 7:35 pm #978104
    Victoria

    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

    June 26, 2018 at 9:14 pm #978148
    MJM

    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, 5 months ago by MJM.
    June 27, 2018 at 2:52 am #978217
    Mike

    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

    June 27, 2018 at 3:17 pm #978451
    MJM

    Yes, it can be closed. Thanks!

    June 28, 2018 at 3:51 am #978685
    Mike

    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

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