Jump to content

Embedded Video Rounded Corners

Go to solution Solved by creedon,

Recommended Posts

  • Solution

Try the following.

#block-5475e0d2d0c890d2fc2c iframe {

  border-radius : 25px;
  
  }

This is specific to the OPs need.

You can of course change the 25px to suit.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 11 months later...

Great code! I am adding the following code:

 

.sqs-video-wrapper{box-shadow: 8px 8px 20px rgba(0,0,0,0.8);}

#block-f78dddc9ce7dffab4822 iframe {

  border-radius: 15px;
  
  }

 

The border radius code is working properly, but if I add the box shadow code, I can see some white corners (see attached file - the one with box shadow) How can I remove those white corners? It appears only if I add box shadow. Thank you.

Screen Shot 2022-03-22 at 19.11.01.png

Screen Shot 2022-03-22 at 19.11.14.png

Edited by HunterD
Link to comment
3 hours ago, HunterD said:

The border radius code is working properly, but if I add the box shadow code, I can see some white corners

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
22 hours ago, HunterD said:

How can I remove those white corners?

Remove or comment out previous attempts at this effect.

Add the following to Design > Custom CSS.

#block-f78dddc9ce7dffab4822 iframe {

  border-radius : 15px;
  box-shadow : 8px 8px 20px rgba( 0, 0, 0, 0.8 );
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 3/23/2022 at 1:58 PM, HunterD said:

For some reason, now I have a tiny little white border at the bottom and left  when the video is played.

I'm not seeing that issue. Perhaps others can? I'm using Chrome/macOS.

When I resize the window there is a momentary visual issue as the video resizes, white lines and other artifacts but after a second or two it settles in and looks fine again. I believe those to be a natural part of how the browser renders the video while being resized and can not be controlled by CSS.

 

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Yes, you are right. I tested it on Chrome/macOS and it is not showing but there's that momentary visual issue you mentioned. Right now it's showing on Safari, so just as you said, that can't be controlled with CSS.  I think that's it. I appreciated  your help, definitely solved my problem.  Thanks again, and best regards!

Edited by HunterD
Link to comment
  • 3 weeks later...

@creedon Hello, do you think you can help me with this? Thanks in advance.

https://groundhog-celery-97hb.squarespace.com. - Pass 123

 

I am trying to achieve this:

 

 

 

uCHNW.thumb.jpg.979d4e2dbf6103552cd6f1918f571c18.jpgBut I am getting this:

Screen Shot 2022-04-12 at 14.16.36.png

 

I am using this code: Design >CSS

h1 {
  
   position: relative;
         }
  h1:after {
    content: "";
    background-color: yellow;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
   
}

 

If I add this, the line disappears:

h1 span {

         }
  h1 span:after {

 

If I add this, the line disappears as well:

z-index: -1;

 

Edited by HunterD
Link to comment
16 hours ago, HunterD said:

@creedon Hello, do you think you can help me with this? Thanks in advance.

https://groundhog-celery-97hb.squarespace.com. - Pass 123

 

I am trying to achieve this:

 

 

 

uCHNW.thumb.jpg.979d4e2dbf6103552cd6f1918f571c18.jpgBut I am getting this:

Screen Shot 2022-04-12 at 14.16.36.png

 

I am using this code: Design >CSS

h1 {
  
   position: relative;
         }
  h1:after {
    content: "";
    background-color: yellow;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
   
}

 

If I add this, the line disappears:

h1 span {

         }
  h1 span:after {

 

If I add this, the line disappears as well:

z-index: -1;

 

Change this

h1:after {
    content: "";
    background-color: #ff0;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}

to this

h1 strong:after {
    content: "";
    background-color: #ff0;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}
h1 strong {
    position: relative;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 minutes ago, tuanphan said:

Change this

h1:after {
    content: "";
    background-color: #ff0;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}

to this

h1 strong:after {
    content: "";
    background-color: #ff0;
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}
h1 strong {
    position: relative;
}

 

Thank you so much!! But the yellow line is above the text, not behind, if I add z-index: -1; the line disappears.

Link to comment
  • 5 weeks later...
14 minutes ago, JordanWH said:

I am struggling with www.many-seeds.com. Any help would be appreciated. Want to round the corners of the video. Brand new to CSS.

Add to Design > Custom CSS

iframe[src*="vimeo.com"] {
    border-radius: 10px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

I found this snippet code here and it works fabulous!

https://codepen.io/Repkit/pen/PzJqZe

Just add the HTML as an embed block where you want your video to appear:
 

<div class="container">
  <iframe class="media" width="560" height="315" src="https://www.youtube.com/embed/rk16JND1kOY" frameborder="0" allowfullscreen></iframe>
</div>

 

and then this part goes in the custom CSS 

 

#block-id-here .media{
  -webkit-box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75);
}

#block-id-here .container:before {
  content: '';
  z-index: 2;
  position: absolute;
  width: 560px;
  height: 315px;
  -webkit-box-shadow: 0 0 0 7px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 0 0 7px rgba(0,0,0,0.75);
  box-shadow: 0 0 0 10px rgba(0,0,0,0.75);
/*   box-shadow: 0px 0px 61px 6px rgba(0,0,0,0.68); */
  pointer-events: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


Here is the final result in a Squarespace web page:

2109282387_ScreenShot2022-09-07at7_11_39PM.png.a3614d45ee747de1a5ca266e6e887e2b.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.