Best Viewed: Safari on iOS, Mac OS X, Windows
Video Effects
Using the HTML5 <video> element, embedding video in a webpage can be as simple as adding a single line of code. And, since <video> is a standard web page element, it can be manipulated with JavaScript and styled with CSS. You can use JavaScript to create your own video controls that match the look and feel of your website, and easily add expert effects to your video such as 3D transforms, reflections, or image masks using CSS. Together, these web technologies let you create polished effects with just a few lines of code.
In this example:
- Video is displayed using the HTML5
<video>tag. - CSS3 transforms and animations change the scale and perspective.
- Reflection is added with
-webkit-box-reflect. - Video is masked with
-webkit-mask.
