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>

1 2 3 4 5

<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>

Want to save time using Bootstrap?

Bootstrap 4 Book
& Starter Templates

Learn by building a CMS admin dashboard and marketing homepage step by step.

Learn More

---

Share this:

• Click to share on Facebook (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on Pinterest (Opens in new window)

Written by: Jacob Lett - Web designer and BootstrapCreative instructor
Category: Code Snippets
Tags: Web Design

---

Related Posts

• How Setting Goals and Losing Sleep Can Help You Learn Programming
• How to Remove the Border Around a HubSpot Email Template
• Web Design Trends and How They are Influenced By Large Brands
• Going from Print Design to Web Design – My Learning Story
• Sparky Bootstrap 3 Sass Starter Project and Tutorial

Blog Home

---

Categories

• Articles
• Code Snippets
• Common Questions
• New Releases
• Tutorials

Topics

• Bootstrap
• BootstrapCreative
• eCommerce
• HubSpot
• Marketing & Sales
• PPC
• Web Design
• WordPress