Mobile View: How to remove white space above and below embedded video (custom liquid) in Dawn

Store Design
1

How can I remove the white space above and below the video in the custom liquid block I have? This only happens in mobile view…

Picture1.png
Picture1.png1454×823 110 KB

2

Hi @dhelpwithshop

To remove the white space above and below the video in mobile view, you can adjust the padding or margins of the iframe element using CSS.

Here’s how you can modify the Custom Liquid code:

<iframe src="https://player.vimeo.com/video/929546473" background-color:#000000="" portrait:0&autoplay:1&muted:1&loop:1&autopause:0="" width="100%" height="500px" controls="0" allowfullscreen="" frameborder="0"></iframe>

  1. Set the height property to a smaller value, like 300px or adjust it as needed for your desired video height on mobile devices.

  2. Add the following CSS styles to remove any padding or margins around the iframe:

iframe {
padding: 0;
margin: 0;
}

You can add these styles either inline within the <style> tags or in an CSS file linked to your page.

Alternatively, you can wrap the iframe in a container <div> and apply the padding/margin adjustments to that container instead of directly on the iframe.

By reducing the iframe height and removing any extra padding or margins, the video should fit snugly within the available space on mobile devices without any white space above or below it.

3

The 300px works and looks good on the mobile view. But 300px on the desktop view looks too small. So this solution won’t work. Do you have another option?

4

@dhelpwithshop

Ok, let’s adapt the code :slightly_smiling_face:

To make the iframe responsive while maintaining the aspect ratio, you can use a combination of CSS and a wrapper div around the iframe. Here’s how to do it:

  1. Remove the width and height attributes from the iframe tag:
  1. Wrap the iframe in a div with a class, e.g. “video-container”:
<iframe src="https://player.vimeo.com/video/929546473" background-color:#000000="" portrait:0&autoplay:1&muted:1&loop:1&autopause:0="" controls="0" allowfullscreen="" frameborder="0"></iframe>
  1. Add the following CSS:
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio (divide 9 by 16 = 0.5625) */
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

How this works:

  • The outer div is relatively positioned and uses padding-bottom to create an aspect ratio box. 56.25% is for a 16:9 aspect ratio. The height is set to 0 to collapse the div

  • The iframe inside is absolutely positioned to fill the entire space of the container div. Width and height are set to 100%.

  • This makes the iframe responsive while preserving its aspect ratio on any screen size.

Some additional tips:

  • You can use a transparent placeholder image in the container div to prevent content jumping before the iframe loads.

  • For other aspect ratios, adjust the padding-bottom value - e.g. 75% for 4:3, 66.66% for 3:2, etc.

  • With CSS aspect-ratio property (if browser support allows), you can set the aspect ratio directly on the iframe without a wrapper div.

So in summary, using a wrapper div with percentage padding and absolute positioning is a robust way to make YouTube and other iframes fully responsive.

The iframe will resize smoothly while always maintaining its original aspect ratio.

5

Okay. I can another question. I would like make the video width smaller so it is not as wide as the whole screen. I would like to center the video and have rounded corners. How can I accomplish those things? Thank you!