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

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

dhelpwithshop
Tourist
9 0 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%;

}

Replies 3 (3)

suyash1
Shopify Partner
10543 1302 1665

@dhelpwithshop - can you please share this page link?

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
dhelpwithshop
Tourist
9 0 1
suyash1
Shopify Partner
10543 1302 1665

@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%);
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.