How to add a border radius to YouTube videos
Published in
1 min readFeb 8, 2018
I was watching a facebook video the other day and I noticed the sexy border radius facebook applies to it’s videos. YouTube is currently my primary video streaming site, and I wanted a sexy border radius when I watched YouTube video too.
I managed to get what I wanted, and I thought other people might want a border radius as well. Below are a few easy steps to get your videos rounded.
- Download a custom CSS browser extension.
To round the corners of the videos, you need to apply theborder-radius:
rule to the video, which is why you need a custom CSS browser extension. - I use Stylish, but there are dozens of options to choose from.
- Go to YouTube and click on a video.
- Create a new stylesheet for the page. Open the extension and find the button to create a new stylesheet.
- Put these rules in the stylesheet and save.
- These apply a border radius to the player.
- .html5-video-player{
border-radius: 8px;
} - #player-container{
border-radius: 8px;
}
This applies a border radius to the thumbnails to make the site more
visually consistent. - #thumbnail{
border-radius: 4px;
}
- You’re done!