Bootstrap responsive video autoplay

❮ HTML tag

A video that will automatically start playing:

      Your browser does not support the video tag.

Definition and Usage

The autoplay attribute is a boolean attribute.

When present, the video will automatically start playing.

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video file start playing automatically [but muted]. 

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

Topic: Bootstrap / Sass

Answer: Add Remove Video Source URL with JavaScript

If try to autoplay YouTube video embedded inside Bootstrap modal through appending the video source url i.e. src attribute value with ?autoplay=1 it will not work properly, because video is started playing before the modal is displayed.

To solve this problem you can add or remove the YouTube video source url based on whether the Bootstrap modal is displayed or not using the JavaScript. Let's see how it works:

Autoplay YouTube Video in Bootstrap Modal .modal-content iframe{ margin: 0 auto; display: block; } $[document].ready[function[]{ /* Get iframe src attribute value i.e. YouTube video url and store it in a variable */ var url = $["#cartoonVideo"].attr['src']; /* Remove iframe src attribute on page load to prevent autoplay in background */ $["#cartoonVideo"].attr['src', '']; /* Assign the initially stored url back to the iframe src attribute when modal is displayed */ $["#myModal"].on['shown.bs.modal', function[]{ $["#cartoonVideo"].attr['src', url]; }]; /* Assign empty url value to the iframe src attribute when modal hide, which stop the video playing */ $["#myModal"].on['hide.bs.modal', function[]{ $["#cartoonVideo"].attr['src', '']; }]; }];

Related FAQ

Here are some more FAQ related to this topic:

Is your industrial website SEO optimized?

Get a free SEO performance analysis and grade.

I tried to find a good solution on the bootstrap site but I didn't get an answer to this yet. I think I can't be the only one struggling with this, but I couldn't find anything that helped me.

I'm trying to embed an mp4-video on my website. The problem is, that if I use an iframe-tag I can't use autoplay and loop. Because of that I would like to solve it with a video tag [or something else that supports autoplay and loop]. After that I tried to make my video responsive with an object-tag but this didn't work. Even though I let it in my code [to show you] which you can see below:

I hope anyone of you can help me fix this.