You can get around this by using a canvas element. It requires a little more code but this approach also opens up many other possibilities and control.
You can apply the CSS with the Canvas element:
#canvas {
background:#000;
border-radius:20px 0 0 20px; /* top left and bottom left as in OP */
}
Then create and load the video manually (alternatively you can load the video with HTML and just hide the original video element):
var video = document.createElement('video'),
url;
/// setup video instance
video.preload = 'auto';
video.addEventListener('canplaythrough', start, false);
/// check what we can play and borrow some online video link
if (video.canPlayType('video/ogg').length > 0 ) {
url = 'http://www.w3schools.com/html/movie.ogg';
} else {
url = 'http://www.w3schools.com/html/movie.mp4';
}
/// start loading video
video.src = url;
/// start the loop
function start(e) {
/// get canvas and context
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
toggle = false;
/// start video and loop
video.play();
loop();
function loop() {
/// we won't need 60 FPS so reduce to 30 FPS
toggle = !toggle;
if (toggle === false) {
requestAnimationFrame(loop);
return;
}
/// draw video frame onto canvas
ctx.drawImage(video, 0, 0, w, h);
requestAnimationFrame(loop);
}
}
This is minimal example of course: you would need to properly check the canPlayType arguments (some browsers say "no" so check for this too or replace no with an empty string to use length as here) for other types as well (ie. webm).
One note though: this won't work with Safari browsers as they do not comply (at current writing) with the Canvas standard. In this case they don't support drawImage with video element as source.
