<body>
<video width="500" height="375" controls class="playr_video">
<source type="video/mp4" src="testvideo.mp4" />
<track kind="subtitles" src="testvideo.vtt" srclang="en" />
</video>
</body>
</html>
I have this working but the subtitles have a black background, I would like to remove that and make the subtitles have a small black outline without any background. Any help is appreciated, thanks!
As stated here: enter link description here
The only cross-browser solution I have found to date is: Hide the video’s text tracks and use your own.
This will allow you to create your own text nodes, with classes, id’s etc. which can then be styled simply via css.
In order to do so, you would utilize the onenter and onexit methods of the text cues in order to implement your own text nodes.
var video = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
tracks = video.textTracks[0],
tracks.mode = 'hidden', // must occur before cues is retrieved
cues = tracks.cues;
var replaceText = function(text) {
$('WHERE_TEXT_GETS_INSERTED').html(text);
},
showText = function() {
$('WHERE_TEXT_GETS_INSERTED').show();
},
hideText = function() {
$('WHERE_TEXT_GETS_INSERTED').hide();
},
cueEnter = function() {
replaceText(this.text);
showText();
},
cueExit = function() {
hideText();
},
videoLoaded = function(e) {
for (var i in cues) {
var cue = cues[i];
cue.onenter = cueEnter;
cue.onexit = cueExit;
}
},
playVideo = function(e) {
video.play();
};
video.addEventListener('loadedmetadata', videoLoaded);
video.addEventLister('load', playVideo);
video.load();
Not sure which element this is suppose to target for track**
.{
color: rgba(0,0,0,0) !important;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
I set out to style my captions to have a black background and be positioned below the video for Safari and Chrome. I have achieved success with the following code combined with editing the .vtt file with the following styles. Note you must add the styles to the .vtt file or else in safari your captions will jump around when the video controls (even if they're hidden) would appear:
4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle
size:100%
for just the summer but I ended up staying here.
Styles for chrome and safari captions:
Chrome uses the video::cue background-color and opacity.
video::cue {
opacity: 1;
background-color: black;
font-size: 20px !important;
}
Safari uses -webkit-media-text-track-display-backdrop for it's background color. Note the !important which overrides Safari's inherent styling.
video::-webkit-media-text-track-display-backdrop {
background-color: black !important;
overflow: visible !important;
}
The following webkit-media-text-track-display overflow is allow for more padding around Chrome's caption text:
video::-webkit-media-text-track-display {
overflow: visible !important;
}
Overflow visible is important on the following code for Safari and I'm setting the captions below the video with the transform, which is reliant on a fixed font-size:
video::-webkit-media-text-track-container {
overflow: visible !important;
transform: translateY(30%) !important;
}
As answered in the duplicate question, use this css:
video::cue {
background-color: transparent;
text-shadow: #000 1px 1px 3px;
}
Related
This question already has answers here:
Disable download button for Google Chrome?
(11 answers)
Closed 5 years ago.
I am getting this download button with <video> tags in Chrome 55, but not on Chrome 54:
How can I remove this so no one can see the download button in Chrome 55?
I have used <video> tag to embed this video on my web page. So, I want some kind of code to remove this download option.
Here is my current code:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Google has added a new feature since the last answer was posted here.
You can now add the controlList attribute as shown here:
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can find all options of the controllist attribute here:
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
This is the solution (from this post)
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
Update 2 :
New Solution by #Remo
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
As of Chrome58 you can now use controlsList to remove controls you don't want shown. This is available for both <audio> and <video> tags.
If you want to remove the download button in the controls do this:
<audio controls controlsList="nodownload">
This can hide download button on Chrome when HTML5 Audio is used.
#aPlayer > audio { width: 100% }
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
/* HIDE DOWNLOAD AUDIO BUTTON */
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio {
width: 420px;
}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
<audio autoplay="autoplay" controls="controls">
<source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
</audio>
</div>
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.
I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:
video::-webkit-media-controls-fullscreen-button {
margin-right: -48px;
z-index: 10;
position: relative;
background: #fafafa;
background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
background-size: 35%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Example: https://jsfiddle.net/dk4q6hh2/
PS You might want to customise the icon, since it's for example only.
May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)
They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.
I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".
The div blocks the activation of the download button.
Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).
You must set the z-index style of the div above the z-index of the audio-controller.
See sapplic.com/jive66 for an example that works for chrome on win7 and on win8.
I have a fallback poster image inside my html5 video preload settings that loads messy while waiting for the actual video to load as it sits then suddenly disappears when the video loads. My question is can I code this transition more neatly and how can I not make the image flash then disappear so messy just right before the video loads? Also when video cannot be loaded such as on mobile/and handheld devices how to remove the play button rendered to the fallback image?
Here are my settings:
<div class = "sudirlayheader-container">
<div class = "sudirlayvideo-container">
<video preload = "auto" autoplay = "autoplay" loop = "loop" volume = "0" poster="video/Dubai-Wallpaper.png">
<source src = "video/sudirlayvid.mp4" type = "video/mp4">
<source src = "video/sudirlayvid.ogg" type = "video/ogg">
<source src = "video/sudirlayvid.webm" type = "video/webm">
<source src = "video/sudirlayvid.mov" type = "video/mov">
</video>
</div>
</div>
I found my own solution, apparently the html5 code that I originally have is correct and the best way to do things but the way to make a smooth transition is mainly just a little editing of css and picture schemes on my behalf. So sum it up I just took a snapshot of the main pic and lightened the frame so that if the video loads but takes time the fallback image just seems to be a cool fade in effect and the css is used to remove the play button when the video does not load on mobile/and handheld devices etc.
Now my main css looks like this:
.header-container {
width: 100%;
height: 900px;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 1;
width: 100%;
}
Notice this line fixes the weird button showing up on the fallback image when video doesnt load
video::-webkit-media-controls-start-playback-button {
display: none;
}
Is it possible to style text tracks (like subtitles and captions) in HTML5 video players?
I already found a way to do so for Chrome:
video::-webkit-media-text-track-container {
// Style the container
}
video::-webkit-media-text-track-background {
// Style the text background
}
video::-webkit-media-text-track-display {
// Style the text itself
}
This seems to confuse Safari a bit. It works, but the rendering is quite buggy.
But more important: How to achieve do this for Firefox and IE?
The only cross-browser solution I have found to date is: Hide the video’s text tracks and use your own.
This will allow you to create your own text nodes, with classes, id’s etc. which can then be styled simply via css.
In order to do so, you would utilize the onenter and onexit methods of the text cues in order to implement your own text nodes.
var video = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
tracks = video.textTracks[0],
tracks.mode = 'hidden', // must occur before cues is retrieved
cues = tracks.cues;
var replaceText = function(text) {
$('WHERE_TEXT_GETS_INSERTED').html(text);
},
showText = function() {
$('WHERE_TEXT_GETS_INSERTED').show();
},
hideText = function() {
$('WHERE_TEXT_GETS_INSERTED').hide();
},
cueEnter = function() {
replaceText(this.text);
showText();
},
cueExit = function() {
hideText();
},
videoLoaded = function(e) {
for (var i in cues) {
var cue = cues[i];
cue.onenter = cueEnter;
cue.onexit = cueExit;
}
},
playVideo = function(e) {
video.play();
};
video.addEventListener('loadedmetadata', videoLoaded);
video.addEventLister('load', playVideo);
video.load();
Use this for Chrome:
video::cue {
// add style here
}
Firefox:
Not yet supported. Open bug to implement ::cue pseudo-element -
https://bugzilla.mozilla.org/show_bug.cgi?id=865395
Edit:
Support for FireFox is available, it works similarly as it does in Chrome and Opera. But support is not yet available for Edge or IE.
I set out to style my captions to have a black background and be positioned below the video for Safari and Chrome. I have achieved success with the following code combined with editing the .vtt file with the following styles. Note you must add the styles to the .vtt file or else in safari your captions will jump around when the video controls (even if they're hidden) would appear:
4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle
size:100%
for just the summer but I ended up staying here.
Styles for chrome and safari captions:
Chrome uses the video::cue background-color and opacity.
video::cue {
opacity: 1;
background-color: black;
font-size: 20px !important;
}
Safari uses -webkit-media-text-track-display-backdrop for it's background color. Note the !important which overrides Safari's inherent styling.
video::-webkit-media-text-track-display-backdrop {
background-color: black !important;
overflow: visible !important;
}
The following webkit-media-text-track-display overflow is allow for more padding around Chrome's caption text:
video::-webkit-media-text-track-display {
overflow: visible !important;
}
Overflow visible is important on the following code for Safari and I'm setting the captions below the video with the transform, which is reliant on a fixed font-size:
video::-webkit-media-text-track-container {
overflow: visible !important;
transform: translateY(30%) !important;
}
EDIT
With some tweaking I ended up using this for my project:
Important: Delete all inline styling from your .VTT file.
Determine if the user is using chrome or safari.
const rootElement = document.getElementById('root');
const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
rootElement.className += "web";
if(M[1] === 'chrome'){
rootElement.className += " chrome";
} else {
rootElement.className += " safari";
}
Then in a SASS .scss file use the following styles. NOTE: If you're not using SASS you can simply create a class for the video element and nest the corresponding styles.
.chrome {
video::cue {
font-size: 24px;
opacity: 1;
background-color: black;
-webkit-transform: translateY(10%) !important;
transform: translateY(10%) !important;
}
video::-webkit-media-text-track-display {
overflow: visible !important;
-webkit-box-sizing: border-box;
background: black;
padding: 8px;
border-radius: 16px;
}
video::-webkit-media-text-track-container {
overflow: visible !important;
-webkit-transform: translateY(40%) !important;
transform: translateY(40%) !important;
position: relative;
}
}
.safari {
video::cue {
font-size: 24px;
opacity: 1;
background-color: black;
}
video::-webkit-media-text-track-display-backdrop {
background-color: black !important;
overflow: visible !important;
}
video::-webkit-media-text-track-display {
overflow: visible !important;
-webkit-box-sizing: border-box;
}
video::-webkit-media-text-track-container {
overflow: visible !important;
-webkit-transform: translateY(20%) !important;
transform: translateY(20%) !important;
position: absolute;
}
}
This is working for chrome,
video::-webkit-media-text-track-container {
// Style the container
}
video::-webkit-media-text-track-background {
// Style the text background
}
video::-webkit-media-text-track-display {
// Style the text itself
}
you can also get some information from those links.
Link 1
Link 2
html
<video >
<source ref="videoSource">
<track default kind="subtitles" src="xxx" />
</video>
//custom element for showing subtitle
<div ref='subtitleTrackWrapper' v-show='showTextTrack'></div>
javascript
let textTrack = [your video tag].textTracks[0]
textTrack.mode = 'hidden'
textTrack.addEventListener('cuechange', () => {
const cues = textTrack.activeCues;
if(cues.length>0){
this.showTextTrack = true
this.$refs.subtitleTrackWrapper.innerHTML = cues[0].text
}else{
this.showTextTrack = false
}
});
Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?
Check out this example. it's not working.
Create a div container with rounded corners and overflow:hidden. Then place the video in it.
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
We have a video playing with rounded corners and a drop shadow and it's as simple as:
border-radius: 22px;
overflow: hidden;
-webkit-transform: translateZ(0);
box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);
The key is the -webkit-transform: translateZ(0). This line of code tells the browser to render on the GPU instead of with the
Tested and working as of Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11
It works in Firefox as long as you set the appropriate 180px height for the 320px width video (16:9 aspect ratio) - otherwise the curved borders aren't visible because they're outside the frame of the video.
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.
Unfortunately, Chrome and Safari do not support border-radius on <video> elements.
If all of your videos are the same size, you could use a CSS mask with an SVG file. If your videos are dynamically sized, that makes things more difficult...
(edit: the SVG mask seems to automatically scale, so this solution should work)
e.g., you can add
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
to your .rc class and it should work in Chrome.
edit: this only seems to work if you remove your inline height and width declarations on your video... You can put them in your CSS, though.
http://jsfiddle.net/QWfhF/2/
Try this. It should work.
-webkit-mask: url(mypath/mask.png);
where the mask.png should be a rounded corner shape.
Did this quick with a circle.
[url removed]
Update October 2019
Border-radius for video now works on firefox, chrome and safari on mac, android and iOS.
Chrome Mobile Bug - if some Chrome android browsers cause you problems with rounding just add the following property to the video css. It's just a 1px transparent image which solves the chrome border-radius rendering bug for android phones
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
Test it here - https://jsfiddle.net/hzd4vec2/
<!DOCTYPE html>
<html>
<head>
<title>Border-radius test</title>
<style type="text/css">
body{
background: #000000;
margin: 0px;
}
#capsule{
height: 600px;
background: #000;
border-radius: 1000px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
</style>
</head>
<body>
<video id="capsule" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
autoplay muted loop></video>
</body>
</html>
Tested on Chrome, Firefox, and Safari:
CSS:
.rounded {
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
}
HTML:
<div class="rounded">
<video>.....</video>
</div>
remove the width property
http://jsfiddle.net/vDPW2/10/
Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
And for CSS would be:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
This can be done with canvas and JavaScript at least (Introduction how to manipulate video frame data with canvas). You basically draw a new canvas, apply the video frame data there, then clip the rounded corners off. I created this quickly, so didn't check whether the anti-aliasing could have been improved, but at least it does the rounding. Performance wise, you can imagine this isn't really as good as applying CSS or something, but it should work on all canvas supported browsers at least.
var video = document.getElementById("video");
var c1 = document.getElementById("roundy");
var ctx = c1.getContext("2d");
video.addEventListener("play", function() {
timerCallback();
}, false);
var timerCallback = function() {
if (video.paused || video.ended) {
return;
}
computeFrame();
setTimeout(function () {
timerCallback();
}, 0);
};
var computeFrame = function() {
var w = 480;
var h = 320;
var r = 20;
ctx.clearRect(0,0,w,h);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = "#09f";
roundRect(ctx, 0,0,w,h,r,true,false);
ctx.drawImage(video, 0, 0, w, h);
return;
}
// http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.clip();
}
Example: http://jsfiddle.net/niklasvh/aFcUh/ (play the top video to view the effects on the bottom canvas one).
class="img-rounded" from bootstrap works fine for me using video.js
<link href="//vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.3/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin img-rounded"
controls preload="auto" width="640" height="264">
<source src="http://example.com/test_video.mp4" type='video/mp4'/>
</video>
Following solution works on my site with video tag and youtube embedded
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
<div class="video">
<iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="video">
<video controls>
<source src="..." type="video/mp4">
</video>
</div>
UPD
I had issue with youtube embedded iframe, container .video had height bigger 3px than its child iframe. And it made bottom corners a little bit incorrect.
Just add font-size: 0 to .video class, fixed the problem
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
I got this working for modern browsers with a parent (div) and the video inside.
The parent has the border-radius: 8px and overflow: hidden. The video just needs display: grid to make the bottom edged rounded too.
I accomplished this using only CSS and a sprite image. This works in all browsers and does not require any JavaScript.
By surrounding the video with a div that is set to position: relative; you can place four divs in each of the four corners on top of the video using z-index and absolute positioning. Then place a sprite background image into each of the four corners that rounds the edge with the same color as the background color. Essentially covering the video with an image of a corner.
Here is a working example: http://jsfiddle.net/476tC/
The code for it also located below:
<style>
video {
width: 100%;
height: auto;
}
.corner-frame {
width: 100%;
position: relative;
}
.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
width: 10px;
height: 10px;
position: absolute;
background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
z-index: 1;
}
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
</style>
<div class="corner-frame">
<video controls>
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
</video>
<div class="corner-top-left"></div>
<div class="corner-top-right"></div>
<div class="corner-bot-left"></div>
<div class="corner-bot-right"></div>
</div>
The sprite I created is only 20px x 20px and only rounds about 10px off the corner. If you would like to download the photoshop file and change the corner color or increase the size you can get the PSD file here: http://www.mediafire.com/?bt9j0vhsmzfm9ta
As has been said border-radius does work in Firefox and Chrome depending on video type. I found it necessary to style using video, video::first-child for mp4. There is probably an inner layer(border) to mp4s. I did the first-child bit when I noticed ogg and webm were working whereas mp4 was not.
remove width="320" height="240"from inside of video tag and add to your css file .rc{width:320; height:240; outline:none; border-radius:15px }
I hope this solution is work for you :)
2022 answer:
Set the video height to max-content and simply use the border-radius:
video {
height: max-content;
border-radius: 16px;
}
A better alternative is to use object-fit (plus object-position) if you don't want to mess with the height:
video {
object-fit: cover; /* so the video covers all the available space */
object-position: center; /* not required */
border-radius: 16px;
}
One attribute does the job and can be added as a class directly on the video tag. The class would look like:
.video-mask
{
border-radius: 3em;
}
If you add these properties:
max-width: 100%;
display: block;
margin: auto;
padding: 1em;
You will have a centered responsive rounded video that resizes to keep its aspect ratio and stays in the middle. None of these are strictly necessary though.
Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?
Check out this example. it's not working.
Create a div container with rounded corners and overflow:hidden. Then place the video in it.
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
We have a video playing with rounded corners and a drop shadow and it's as simple as:
border-radius: 22px;
overflow: hidden;
-webkit-transform: translateZ(0);
box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);
The key is the -webkit-transform: translateZ(0). This line of code tells the browser to render on the GPU instead of with the
Tested and working as of Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11
It works in Firefox as long as you set the appropriate 180px height for the 320px width video (16:9 aspect ratio) - otherwise the curved borders aren't visible because they're outside the frame of the video.
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.
Unfortunately, Chrome and Safari do not support border-radius on <video> elements.
If all of your videos are the same size, you could use a CSS mask with an SVG file. If your videos are dynamically sized, that makes things more difficult...
(edit: the SVG mask seems to automatically scale, so this solution should work)
e.g., you can add
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
to your .rc class and it should work in Chrome.
edit: this only seems to work if you remove your inline height and width declarations on your video... You can put them in your CSS, though.
http://jsfiddle.net/QWfhF/2/
Try this. It should work.
-webkit-mask: url(mypath/mask.png);
where the mask.png should be a rounded corner shape.
Did this quick with a circle.
[url removed]
Update October 2019
Border-radius for video now works on firefox, chrome and safari on mac, android and iOS.
Chrome Mobile Bug - if some Chrome android browsers cause you problems with rounding just add the following property to the video css. It's just a 1px transparent image which solves the chrome border-radius rendering bug for android phones
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
Test it here - https://jsfiddle.net/hzd4vec2/
<!DOCTYPE html>
<html>
<head>
<title>Border-radius test</title>
<style type="text/css">
body{
background: #000000;
margin: 0px;
}
#capsule{
height: 600px;
background: #000;
border-radius: 1000px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
</style>
</head>
<body>
<video id="capsule" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
autoplay muted loop></video>
</body>
</html>
Tested on Chrome, Firefox, and Safari:
CSS:
.rounded {
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
}
HTML:
<div class="rounded">
<video>.....</video>
</div>
remove the width property
http://jsfiddle.net/vDPW2/10/
Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
And for CSS would be:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
This can be done with canvas and JavaScript at least (Introduction how to manipulate video frame data with canvas). You basically draw a new canvas, apply the video frame data there, then clip the rounded corners off. I created this quickly, so didn't check whether the anti-aliasing could have been improved, but at least it does the rounding. Performance wise, you can imagine this isn't really as good as applying CSS or something, but it should work on all canvas supported browsers at least.
var video = document.getElementById("video");
var c1 = document.getElementById("roundy");
var ctx = c1.getContext("2d");
video.addEventListener("play", function() {
timerCallback();
}, false);
var timerCallback = function() {
if (video.paused || video.ended) {
return;
}
computeFrame();
setTimeout(function () {
timerCallback();
}, 0);
};
var computeFrame = function() {
var w = 480;
var h = 320;
var r = 20;
ctx.clearRect(0,0,w,h);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = "#09f";
roundRect(ctx, 0,0,w,h,r,true,false);
ctx.drawImage(video, 0, 0, w, h);
return;
}
// http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.clip();
}
Example: http://jsfiddle.net/niklasvh/aFcUh/ (play the top video to view the effects on the bottom canvas one).
class="img-rounded" from bootstrap works fine for me using video.js
<link href="//vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.3/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin img-rounded"
controls preload="auto" width="640" height="264">
<source src="http://example.com/test_video.mp4" type='video/mp4'/>
</video>
Following solution works on my site with video tag and youtube embedded
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
<div class="video">
<iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="video">
<video controls>
<source src="..." type="video/mp4">
</video>
</div>
UPD
I had issue with youtube embedded iframe, container .video had height bigger 3px than its child iframe. And it made bottom corners a little bit incorrect.
Just add font-size: 0 to .video class, fixed the problem
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
I got this working for modern browsers with a parent (div) and the video inside.
The parent has the border-radius: 8px and overflow: hidden. The video just needs display: grid to make the bottom edged rounded too.
I accomplished this using only CSS and a sprite image. This works in all browsers and does not require any JavaScript.
By surrounding the video with a div that is set to position: relative; you can place four divs in each of the four corners on top of the video using z-index and absolute positioning. Then place a sprite background image into each of the four corners that rounds the edge with the same color as the background color. Essentially covering the video with an image of a corner.
Here is a working example: http://jsfiddle.net/476tC/
The code for it also located below:
<style>
video {
width: 100%;
height: auto;
}
.corner-frame {
width: 100%;
position: relative;
}
.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
width: 10px;
height: 10px;
position: absolute;
background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
z-index: 1;
}
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
</style>
<div class="corner-frame">
<video controls>
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
</video>
<div class="corner-top-left"></div>
<div class="corner-top-right"></div>
<div class="corner-bot-left"></div>
<div class="corner-bot-right"></div>
</div>
The sprite I created is only 20px x 20px and only rounds about 10px off the corner. If you would like to download the photoshop file and change the corner color or increase the size you can get the PSD file here: http://www.mediafire.com/?bt9j0vhsmzfm9ta
As has been said border-radius does work in Firefox and Chrome depending on video type. I found it necessary to style using video, video::first-child for mp4. There is probably an inner layer(border) to mp4s. I did the first-child bit when I noticed ogg and webm were working whereas mp4 was not.
remove width="320" height="240"from inside of video tag and add to your css file .rc{width:320; height:240; outline:none; border-radius:15px }
I hope this solution is work for you :)
2022 answer:
Set the video height to max-content and simply use the border-radius:
video {
height: max-content;
border-radius: 16px;
}
A better alternative is to use object-fit (plus object-position) if you don't want to mess with the height:
video {
object-fit: cover; /* so the video covers all the available space */
object-position: center; /* not required */
border-radius: 16px;
}
One attribute does the job and can be added as a class directly on the video tag. The class would look like:
.video-mask
{
border-radius: 3em;
}
If you add these properties:
max-width: 100%;
display: block;
margin: auto;
padding: 1em;
You will have a centered responsive rounded video that resizes to keep its aspect ratio and stays in the middle. None of these are strictly necessary though.