CODEWITHSUNDEEP
htmliframe
Subhash Shipu
Subhash Shipu

Reputation: 341

how to disable autoplay video in iframe

I have tried the following code: 

<iframe controls="0" autoplay="0" class="embed-responsive-item" src="videos/first_video.mp4"></iframe>

I have tried many things but not getting any solution. I want to disable the autoplay on the video and don't want to use <video> tag so its possible without <video> tag?

Upvotes: 1

Views: 15672

Answers (4)

tjex
tjex

Reputation: 256

Set autoplay="false", not 0.

I'm not sure what controls does. But that may also need to be set to "false"

<iframe 
    autoplay="false" 
    controls="0" <!-- or maybe "false" as well -->
    class="embed-responsive-item" 
    src="videos/first_video.mp4">
</iframe>

Upvotes: 0

user8158111
user8158111

Reputation:

I think this is what you want.

function a() {
var iframe = document.getElementById("iframe");
iframe.src = "video.mp4"
}
<iframe src="imagename" height="200" width="300" id="iframe"></iframe>
<button onclick="a()">Play</button>

Upvotes: 1

zer00ne
zer00ne

Reputation: 43870

According to this article the syntax should go like this:

<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe>

<iframe src="https://cross-origin.com/myvideo.html" allow="fullscreen"></iframe>

<iframe src="https://cross-origin.com/myvideo.html" allow=""></iframe>

This is fairly new (at least to me) and I don't see explicit directions as to how autoplay is shut off. Try either the second or third example. This is part of the new feature policy called iframe delegation which will go into full effect on april 2018. I will add onto this answer if I find more concrete info.

Upvotes: 0

Rvdrichard
Rvdrichard

Reputation: 335

iframe does not support this by default. Why do you not want to use video tag? The only thing I can think of to make it look like an iframe without autoplay is with help of javascript.

First set the iframe src to empty or leave the src out. Set a picture as iframe background to make it look like the video.

<iframe style="background-image:url(picture.png)" id="frame" controls="0" class="embed-responsive-item" src=""></iframe>

Then create an onclick event for that iframe and change the iframe src

function loadVideo() {
  var frame = document.getElementById("frame");
  frame.src = "video.mp4";
}

I would consider using video tag or a plugin that works on every browser.

Upvotes: 0

Related Questions