-
AuthorPosts
-
June 4, 2018 at 9:03 pm #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!
June 6, 2018 at 4:52 am #967611Hey 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,
MikeJune 6, 2018 at 3:10 pm #967885I 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 #970423Hi MattJensenMarketing,
Credentials did not work for me. Could you please update the credentials?
Best regards,
VictoriaJune 11, 2018 at 3:27 pm #971240Please see Private Content area
June 12, 2018 at 5:56 am #971522Hi,
You could set a standard size for your videos with this css in the Enfold Theme Options > General Styling > Quick CSS fieldiframe[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,
MikeJune 26, 2018 at 6:09 pm #978056Thank 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 #978104Hi 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,
VictoriaJune 26, 2018 at 9:14 pm #978148That 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.
June 27, 2018 at 2:52 am #978217Hi,
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,
MikeJune 27, 2018 at 3:17 pm #978451Yes, it can be closed. Thanks!
June 28, 2018 at 3:51 am #978685Hi,
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 -
AuthorPosts
- The topic ‘Aspect Ratio of Embedded YouTube Video’ is closed to new replies.