How to round corners of videos? (Dawn theme, custom liquid)

Solved

How to round corners of videos? (Dawn theme, custom liquid)

JC671
Tourist
5 0 0

My site is using custom liquid to display videos and I'd like the corners to be rounded by 10px.

Is that possible to implement somehow? Thank you in advance for any help or feedback.

 

Example of video custom liquid:

<style>
video {
display: block;
margin: 0 auto;
width: 60%;
height: 50%;
}
</style>
<video autoplay loop playsinline muted>
<source src="videolinkexample.mp4">
</video>

 

 

Accepted Solution (1)

Liam
Shopify Staff
2807 310 805

This is an accepted solution.

Hi JC671,

 

To add rounded corners to elements, you'd be using the CSS `border-radius` property. You can test different values for this property to see which would work best for your use case. 

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
4304 1105 1354

Hey @JC671 
Kindly share your Store URL and Password if enabled

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Liam
Shopify Staff
2807 310 805

This is an accepted solution.

Hi JC671,

 

To add rounded corners to elements, you'd be using the CSS `border-radius` property. You can test different values for this property to see which would work best for your use case. 

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

JC671
Tourist
5 0 0

Thank you again, Liam!

 

For those wondering, I simply added this line to the CSS portion of custom liquid:

border-radius: 15px;

 

So now it looks like:

 

 

<style>
 
video { 
 
display: block;
margin: 0 auto;
width: 65%;
height: 50%;
border-radius: 15px; 
}

/* Tablet styles */
@media (max-width: 1023px) {
    video {
        width: 90%;
        height: 55%;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    video {
        width: 90%;
        height: 60%;
    }
}
 
</style>
 
 
<video autoplay loop playsinline muted> 
<source src="link.mp4">
</video>

 

 

You can also add border-radius to the base.css file to round corners of Shopify's video section, for example,

 

 

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 10px; 
}

 

 

JC671
Tourist
5 0 0

An even better solution to adding border radius to photos and videos in Shopify theme settings is to paste this code into the Custom CSS section:

 

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  border-radius: 10px;
}