Styling HTML5 Video with CSS

Published: 2014-10-17 09:22 -0400

If you add an image to an HTML document you can style it with CSS. You can add borders, change its opacity, use CSS animations, and lots more. HTML5 video is just as easy to add to your pages and you can style video too. Lots of tutorials will show you how to style video controls, but I haven’t seen anything that will show you how to style the video itself. Read on for an extreme example of styling video just to show what’s possible.

Here’s a simple example of a video with a single source wrapped in a div:

<div id="styled_video_container">
    <video src="/video/wind.mp4" type="video/mp4" controls poster="/video/wind-8a1cd93f.png" id="styled_video" muted preload="metadata" loop>
</div>

Add some buttons under the video to style and play the video and then to stop the madness.

<button type="button" id="style_it">Style It!</button>
<button type="button" id="stop_style_it">Stop It!</button>

We’ll use this JavaScript just to add a class to the containing element of the video and play/pause the video.

jQuery(document).ready(function($) {
  $('#style_it').on('click', function(){
    $('#styled_video')[0].play();
    $('#styled_video_container').addClass('style_it');
  });
  $('#stop_style_it').on('click', function(){
    $('#styled_video_container').removeClass('style_it');
    $('#styled_video')[0].pause();
  });
});

Using the class that gets added we can then style and animate the video element with CSS. This is a simplified version without vendor flags.

#styled_video_container.style_it  {
    background: linear-gradient(to bottom, #ff670f 0%,#e20d0d 100%); 
}
#styled_video_container.style_it video {
    border: 10px solid green !important;
    opacity: 0.6;
    transition: all 8s ease-in-out;
    transform: rotate(300deg);
    box-shadow:         12px 9px 13px rgba(255, 0, 255, 0.75);
}

Stupid Video Styling Tricks

Conclusion

OK, maybe there aren’t a lot of practical uses for styling video with CSS, but it is still fun to know that we can. Do you have a practical use for styling video with CSS that you can share?