CODEWITHSUNDEEP
htmliframe
nfsfjsk876
nfsfjsk876

Reputation: 17

How to stop autoplay?

I'm making a webpage and I have to include a video in it, so I used one from pakvim.com. I used their embed option, and inserted the code they gave me. The vidoe works fine, but I don't want the video to start playing once the page loads. I've already tried putting autoplay="false" or autoplay="0" and it didn't work. How do I do this without using a vidoe tag? I also want to do this using only html. 

<iframe width="560" height="315" src="http://pakvim.com/embed/nCE4UUPxO_s" frameborder="0" allowfullscreen></iframe>

Upvotes: 1

Views: 250

Answers (2)

zer00ne
zer00ne

Reputation: 43870

What @Quentin says is correct, unless that service has an API allowing you access like YouTube does. But there's a way you can still have the video and play it on your site when the user clicks it.

  1. Make or find an image with the dimensions of the iframe (1# 560x315).

  2. Either upload it to your server or image host, and replace the url of the iframe with the url of the image and give the iframe an id (2# id='vid1'.)

  3. Next, create a div and assign it a class (3# class='overlay') and place an <a>nchor inside of it.
  4. Assign the anchor's href with the value of the video's url (4# href='http://pakvim.com/embed/nCE4UUPxO_s') and then assign it the attribute target with the value of the iframe's id (5# target='vid1'.)
  5. Now wrap all of the nodes in another div. This layout will work in conjunction with the CSS provided.
  6. For the sake of brevity, I'm not listing the CSS or JS here, but keep in mind any deviation from said CSS and/or JS may not guarantee success unless you know what each style is doing and what the JS function will do--one will not operate properly without the other. Details not listed here are commented in the Snippet.

SNIPPET

// Reference the div.overlay
var overlay = document.querySelector('.overlay');

// When div.overlay is clicked...
overlay.addEventListener('click', function(event) {
  // Assign the clicked node to a var
  var tgt = event.target;
  // Set the CSS display property of tgt to 'none'
  tgt.style.display = 'none';
}, false);
/* #1 */
.box,
.overlay {
  width: 560px;
  height: 315px;
  overflow: hidden;
}
.box {
  position: relative;
}
/* This ruleset will place .overlay completely over the iframe */
/* #3 */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
/* This ruleset will stretch the anchor completely over the .overlay */

a {
  display: block;
  width: 100%;
  height: 100%;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div class='box'>
  <!-- #3 -->
  <div class='overlay'>
    <!-- #4 --><!-- #5 -->
    <a href='http://pakvim.com/embed/nCE4UUPxO_s' target='vid1'></a>
  </div>
  <!-- #2 --> 
  <iframe name='vid1' width="560" height="315" src="http://imgh.us/your_logo_here.jpg" frameborder="0" allowfullscreen></iframe>
</div>

REFERENCES

Upvotes: 0

Quentin
Quentin

Reputation: 943193

You are loading a 3rd party hosted HTML document into a frame.

That HTML document is loading a video and configuring it to autoplay.

You have no control over that HTML document (not even with JS), so you have no way to prevent it from setting the video to autoplay.

Upvotes: 2

Related Questions