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>

Written by: Jacob Lett - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Code Snippets
Tags: Web Design

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here

Share this:

Want to Get Email Updates?