Need to make a liquid code video iframe less wide, centered, and add rounded corners

Store Design
, ,

Topic summary

A user needs help modifying a Vimeo video iframe embedded via Liquid code in the Dawn theme. The video currently spans the full page width and requires three adjustments:

Current issues:

  • Video takes up 100% page width
  • Not centered
  • Missing rounded corners

Solution provided:
A CSS code snippet was shared to add to the end of base.css that:

  • Reduces width to 70% (on screens 750px+)
  • Centers the video using left: 50% and transform: translateX(-50%)
  • Targets the specific video container section

Status: The discussion appears resolved with a working CSS solution provided, pending implementation by the original poster.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have liquid code on the dawn theme and have inserted a vimeo video. I need to make the video less wide, center it, and add rounded corners. It is the whole width of the page currently. Here is the custom CSS code I have. What do I need to add?

.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%;

}

2

@dhelpwithshop - can you please share this page link?

3

www.customsonggift.com

4

@dhelpwithshop - please add this css to the very end of your base.css

@media screen and (min-width:750px){
#shopify-section-template--16976905765043__custom_liquid_iXh3yH .video-container iframe {
    left: 50% !important;
    width: 70% !important;
    transform: translate(-50%);
}