I'm working on an email campaign that includes a CTA (Call to Action) directing users to a cloud page where I've embedded a YouTube video. The video displays correctly on mobile devices, maintaining the 16:9 aspect ratio, but on desktop browsers, it shows black bars on the sides, as if the aspect ratio is not being maintained.
Here is the HTML code I'm using:
<div style="text-align: center;">
<div class="video-container" style="position: relative; width: 100%; max-width: 560px; margin: 20px auto; height: 0; padding-bottom: 56.25%; overflow: hidden; background: #000;">
<iframe src="My_url_video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
</div>
I've tried adjusting the margin and padding-bottom values, but the issue persists. The video container should maintain a 16:9 aspect ratio, but it seems to be displaying differently on desktop compared to mobile.
What I've tried:
Adjusting margin and padding-bottom values. Clearing browser cache and cookies. Checking for any interfering browser extensions. Issue:
Correct aspect ratio on mobile devices. Black bars on the sides of the video on desktop browsers.
Any help or suggestions on how to fix this issue would be greatly appreciated!
Thank you in advance!
Though I'm not sure what other HTML and CSS is being used that may affect this, I would personally keep it very simple using aspect-ratio:16/9; and just remove the unnecessary width/height, top/bottom and other positioning styles from the iFrame.
You may want to use aspect-ratio for the container and set the iFrame width and height to 100% of its container:
<div class="video-container" style="position:relative; width:100%; max-width:560px; aspect-ratio:16/9; margin:20px auto; background:#000;">
<iframe src="my_video_url" style="width:100%; height:100%;"></iframe>
</div>
But you could also set the iFrames aspect-ratio to 16/9 and make its width 100% of its container. The iFrames height will adjust according to its aspect ratio, to the containers width:
<div class="video-container" style="position:relative; width:100%; max-width:560px; margin:20px auto; background:#000;">
<iframe src="my_video_url" style="width:100%; aspect-ratio:16/9;"></iframe>
</div>