Geek Answers Handbook

Play iframe video when clicking javascript link

I used iframe video on my webpage. This is my html code

 <iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> <a href="#" id="playvideo">Play video</a>

I need to play video onclick video play link. How can i do this?

+6
source share
5 answers

This works, it adds autoplay=1 to the URL, causing the video to play.

Appendix: If your video source does not yet have a query string, would it be wise to add ? instead of & , as sometimes happens. This can be done by searching for its existence.

 <iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> <a href="#" id="playvideo">Play video</a> <script> //use .one to ensure this only happens once $("#playvideo").one(function(){ //as noted in addendum, check for querystring exitence var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?"; //modify source to autoplay and start video $("#video1")[0].src += symbol + "autoplay=1"; }); </script>

However, most people basically understand that if they want the video to play, they just click on it, and I would advise just leaving it to them or starting the video from auto play.

It should also be noted that autorun does not work on mobile devices (on the Android or iOS platform)

+18
source

since the first answer is already 3 years old, let me point out the Youtube Player API. Thanks to this, you can remotely control the built-in player. See https://developers.google.com/youtube/iframe_api_reference?hl=en

With a little tweaking, you can start the video by reference and without rebooting the entire iframe:

 <!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <!-- The Play-Link will appear in that div after the video was loaded --> <div id="play"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { //event.target.playVideo(); document.getElementById('play').innerHTML = '<a href="#" onclick="play();">Play Video</a>'; } function play(){ player.playVideo(); } // 5. The API calls this function when the player state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
+1
source

I installed src correctly at the end -? autoplay = 1

  <iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> <a href="#" id="playvideo">Play button</a> <script> $("#playvideo").click(function(){ $("#video1")[0].src += "?autoplay=1"; }); </script>
+1
source

Here is another example. Check it out here: https://codepen.io/rearmustak/pen/VXXOBr

 const Player = document.getElementById('player2'); const PlayBtn = document.getElementById('play'); const stopBtn = document.getElementById('stop'); let times = 0, playY; const playVideo = PlayBtn.addEventListener( 'click' , () => { if(times == 0){ playY = Player.src += '?autoplay=1'; times = 1; } }); stopBtn.addEventListener( 'click' , () => { playY = playY.slice(0, -11); Player.src = playY times = 0; }); 
 .video-frame{ overflow: hidden; margin-bottom: 10px; } button{ border: none; background-color: #e75252; color: #ffffff; padding: 10px 15px; border-radius: 3px; cursor: pointer; } button:focus{ outline: 0; } #stop{ background-color: #ff0002; } 
 <h1>Youtube video Play/Stop</h1> <div class="video-frame"> <iframe id="player2" width="560" height="315" src="https://www.youtube.com/embed/cs1e0fRyI18" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <button id="play">Play</button> <button id="stop">Stop</button>
+1
source

here is a link to an example http://jsfiddle.net/WYwv2/5/

check this

 <!DOCTYPE html> <html> <body> <a href="#" id="playvideo" onclick="playme()">Play video</a> <iframe id="video1" width="520" height="360" frameborder="0" ></iframe> <script> function playme() { document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4'; } </script> </body> </html>​

We set the video source dynamically.

0
source

More articles:


All Articles