New Shopify Certification now available: Liquid Storefronts for Theme Developers

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

Solved
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
Shopify Staff
1898 202 577

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
3051 761 925

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Liam
Shopify Staff
Shopify Staff
1898 202 577

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;
}