HTML5 Responsive Autoplay Video Code Snippet

Updated on June 4th, 2019
read

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, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn