Как добавить к видео радиус границы в HTML/CSS
Как я могу добавить border-radius к <video>тег.
Вот как сейчас выглядит мое видео:
![Я уже пробовал сделать тег видео с помощью css, но он не изменился.Вот код: /*CSS*/ video { border-radius: 10px; } <!HTML!> <div class="fp-player"> <center> <div id="instructions"> <video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png"> <source src="https://example.org/video.mp4" type='video/mp4' /> </video> </center> </div>](/images/7e95c347ac0d8124b685d00b1d1f59a5848503b9.png){kind=link}
4 ответа
Попробуйте сделать что-то подобное
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
Оберните видео в div и придайте ему такой стиль,
div {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 320px;
width: 480px;
}
Я нашел этот ответ в разделе Добавление радиуса границы для встроенного видео YouTube
Вот пример, который может помочь
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#video1 {
border-radius:10px;
}
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</body>
</html>
Добавьте "border-radius:10px;" к стилю видео.