Embedded Video Rounded Corners

Site URL: https://yachtmentor.co/

Evening all, 

I've been desperately trying to round the corners (with CSS) on the embedded Youtube video on my Home page - no luck so far. 

The site is https://yachtmentor.co/

The video is at https://www.youtube.com/watch?v=96rP7Jaeb6A

Any help would be much appreciated!! 

Thanks, 

Will 

Thank you so much for this! Works exactly as I hoped. 

Will 

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.

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.

In addition to that, is it possible to remove "watch on YouTube"and the channel logo on the left? Thank you very much.

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.

5 hours ago, HunterD said:

is it possible to remove "watch on YouTube"and the channel logo on the left?

I don't have a solution for that.

Perfect! Worked like a charm! For some reason, now I have a tiny little white border at the bottom and left  when the video is played. Is this something you could help me with? If not, thank you for spending your time on trying to help me.

Actually, this border shows up when resizing the bowser too...

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.

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!

@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:

But I am getting this:

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;

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:

 

 

 

But I am getting this:

 

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

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.

On 4/13/2022 at 4:51 PM, HunterD said:

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

Where did you get above code?

@tuanphan

I think the yellow line issue was solved in another thread.

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.

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

12 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

Worked perfectly. Thanks so much. 🙏

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: