Play video in Iframe from a external button

Question

Is it possible to start video play back of YouTube iframe from an external button?

<button>Play Button</button>

<iframe width="560" height="315" src="https://www.youtube.com/embed/HJtJXMKpl2g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Disclamer Note: The iframe video doesn't belongs to me.

Please clarify, do you want to open the embed in a separate window? - if so, you can change the code as: `Play Button`. — Marco Aurelio Fernandez Reyes, Nov 11 '21 at 15:27
Does this answer your question? [play iframe video on click a link javascript](https://stackoverflow.com/questions/13619074/play-iframe-video-on-click-a-link-javascript) — tacoshy, Nov 11 '21 at 15:31

score 1 · Answer 1 · answered Nov 11 '21 at 15:52

Since this video is in iframe and in another host, by secure reasons you can't access to inner structure of that iframe by

const iframe = document.getElementById("myFrame");
const video = iframe.contentWindow.document.getElementsByTagName("video")[0];

video.play();

Adding "autoplay=1" to the src may help, but it can only start once video

iframe.setAttribute('src', iframe.getAttribute('src') + "?autoplay=1")

DarkIceDust · Answer 2 · 2021-11-11T15:33:24.607

0

Yeah, it is possible. Try this and adjust it as you deserve:

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">Click on "Play Button"</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">Play Button</button></p>
  <div id="youtube-frame"></div>
  </div>
</div>
</body>

<script>
function play1() { 
    var frame = document.getElementById("youtube-frame");
    frame.innerHTML = "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  }
</script>

edited Nov 11 '21 at 15:33

answered Nov 11 '21 at 15:28

DarkIceDust

231
2
14

+= adds a new element. If you click the button 100 times it add the video 100 times. – tacoshy Nov 11 '21 at 15:32
True. Modified now. – DarkIceDust Nov 11 '21 at 15:33
I think, It's just creating a new iframe video when play button is clicked. But actual requirement is to start the video play back when play button is clicked. – Manu Nov 11 '21 at 17:13

Play video in Iframe from a external button

2 Answers2