HTML5 Responsive Autoplay Video Code Snippet

Updated on June 4th, 2019
read
Add to Flipboard Magazine.

In order to make your HTML5 video responsive you will need to add the following CSS style properties: width: 100%, and max-height: 100%.


<video style="width: 100%; max-height: 100%;" autoplay="autoplay" width="300" height="150">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
  Your browser does not support the video tag.</video>

Your browser does not support the video tag.</video>

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Written by: Jacob Lett - Jacob started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Code Snippets
Tags: Web Design

Want to Get Email Updates?

Share this:

Are You a Bootstrap Beginner?