Play Iframe Video On Click A Link Javascript August 30, 2023 Post a Comment I have used a iframe video in my web page. This is my html code <h2 id="solution_1">Solution 1: </h2><div class="answer-desc"><p>This works, it appends <code>autoplay=1</code> to the url causing the video to start playing. </p><p><em>addendum</em>: If your video's source does not already have a querystring then it would be prudent to add a <code>?</code> instead of a <code>&</code>, as is sometimes the case. This can be done by looking for its existence.</p><pre><code id="code_3" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">iframe</span><span class="hljs-attr">id</span>=<span class="hljs-string">"video1"</span><span class="hljs-attr">width</span>=<span class="hljs-string">"520"</span><span class="hljs-attr">height</span>=<span class="hljs-string">"360"</span><span class="hljs-attr">src</span>=<span class="hljs-string">"http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi"</span><span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span><span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">"true"</span><span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span><span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span><span class="hljs-attr">id</span>=<span class="hljs-string">"playvideo"</span>></span>Play video<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-comment">//use .one to ensure this only happens once</span> $(<span class="hljs-string">"#playvideo"</span>).<span class="hljs-title function_">one</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ <span class="hljs-comment">//as noted in addendum, check for querystring exitence</span><span class="hljs-keyword">var</span> symbol = $(<span class="hljs-string">"#video1"</span>)[<span class="hljs-number">0</span>].<span class="hljs-property">src</span>.<span class="hljs-title function_">indexOf</span>(<span class="hljs-string">"?"</span>) > -<span class="hljs-number">1</span> ? <span class="hljs-string">"&"</span> : <span class="hljs-string">"?"</span>; <span class="hljs-comment">//modify source to autoplay and start video</span> $(<span class="hljs-string">"#video1"</span>)[<span class="hljs-number">0</span>].<span class="hljs-property">src</span> += symbol + <span class="hljs-string">"autoplay=1"</span>; }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre><p>However, most people inherently understand that if they want a video to play, they will just click on it and I would suggest just leaving that to them or starting the video off with autoplay.</p><a name='more'></a><p>Also need to mention that autoplay does not work on mobile devices (powered by Android or iOS)</p></div><h2 id="solution_2">Solution 2: </h2><div class="answer-desc"><p>I correctly set in end src - ?autoplay=1</p><pre><code id="code_4" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">iframe</span><span class="hljs-attr">id</span>=<span class="hljs-string">"video1"</span><span class="hljs-attr">width</span>=<span class="hljs-string">"450"</span><span class="hljs-attr">height</span>=<span class="hljs-string">"280"</span><span class="hljs-attr">src</span>=<span class="hljs-string">"http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi"</span><span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span><span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">"true"</span><span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span><span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span><span class="hljs-attr">id</span>=<span class="hljs-string">"playvideo"</span>></span>Play button<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> $(<span class="hljs-string">"#playvideo"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ $(<span class="hljs-string">"#video1"</span>)[<span class="hljs-number">0</span>].<span class="hljs-property">src</span> += <span class="hljs-string">"?autoplay=1"</span>; }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_4')">Copy</button></pre></div><h2 id="solution_3">Solution 3: </h2><div class="answer-desc"><p>Here is another example. Check this here: <a rel="nofollow noreferrer noopener" href="https://codepen.io/rearmustak/pen/VXXOBr">https://codepen.io/rearmustak/pen/VXXOBr</a></p><p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"><code id="code_5" class="hljs language-javascript"><span class="hljs-keyword">const</span><span class="hljs-title class_">Player</span> = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'player2'</span>); <span class="hljs-keyword">const</span><span class="hljs-title class_">PlayBtn</span> = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'play'</span>); <span class="hljs-keyword">const</span> stopBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'stop'</span>); <span class="hljs-keyword">let</span> times = <span class="hljs-number">0</span>, playY; <span class="hljs-keyword">const</span> playVideo = <span class="hljs-title class_">PlayBtn</span>.<span class="hljs-title function_">addEventListener</span>( <span class="hljs-string">'click'</span> , <span class="hljs-function">() =></span> { <span class="hljs-keyword">if</span>(times == <span class="hljs-number">0</span>){ playY = <span class="hljs-title class_">Player</span>.<span class="hljs-property">src</span> += <span class="hljs-string">'?autoplay=1'</span>; times = <span class="hljs-number">1</span>; } }); stopBtn.<span class="hljs-title function_">addEventListener</span>( <span class="hljs-string">'click'</span> , <span class="hljs-function">() =></span> { playY = playY.<span class="hljs-title function_">slice</span>(<span class="hljs-number">0</span>, -<span class="hljs-number">11</span>); <span class="hljs-title class_">Player</span>.<span class="hljs-property">src</span> = playY times = <span class="hljs-number">0</span>; });</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_5')">Copy</button></pre><pre class="snippet-code-css lang-css prettyprint-override"><code id="code_6" class="hljs language-css"><span class="hljs-selector-class">.video-frame</span>{ <span class="hljs-attribute">overflow</span>: hidden; <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>; } <span class="hljs-selector-tag">button</span>{ <span class="hljs-attribute">border</span>: none; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#e75252</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span><span class="hljs-number">15px</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span>; <span class="hljs-attribute">cursor</span>: pointer; } <span class="hljs-selector-tag">button</span><span class="hljs-selector-pseudo">:focus</span>{ <span class="hljs-attribute">outline</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-id">#stop</span>{ <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ff0002</span>; }</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_6')">Copy</button></pre><pre class="snippet-code-html lang-html prettyprint-override"><code id="code_7" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Youtube video Play/Stop<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">class</span>=<span class="hljs-string">"video-frame"</span>></span><span class="hljs-tag"><<span class="hljs-name">iframe</span><span class="hljs-attr">id</span>=<span class="hljs-string">"player2"</span><span class="hljs-attr">width</span>=<span class="hljs-string">"560"</span><span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span><span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/cs1e0fRyI18"</span><span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span><span class="hljs-attr">allow</span>=<span class="hljs-string">"autoplay; encrypted-media"</span><span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span><span class="hljs-attr">id</span>=<span class="hljs-string">"play"</span>></span>Play<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span><span class="hljs-attr">id</span>=<span class="hljs-string">"stop"</span>></span>Stop<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_7')">Copy</button></pre></div></div></div><h2 id="solution_4">Solution 4: </h2><div class="answer-desc"><p>since the first answer is already 3 years old, let me point to the Youtube Player API. With that you can remote control your embedded player. See <a rel="nofollow noreferrer noopener" href="https://developers.google.com/youtube/iframe_api_reference?hl=en">https://developers.google.com/youtube/iframe_api_reference?hl=en</a></p><p>With a small adjustment, you can start the video via link and without reloading the entire iframe:</p><pre><code id="code_8" class="hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span><span class="hljs-tag"><<span class="hljs-name">html</span>></span><span class="hljs-tag"><<span class="hljs-name">body</span>></span><span class="hljs-comment"><!-- 1. The <iframe> (and video player) will replace this <div> tag. --></span><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">id</span>=<span class="hljs-string">"player"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-comment"><!-- The Play-Link will appear in that div after the video was loaded --></span><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">id</span>=<span class="hljs-string">"play"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-comment">// 2. This code loads the IFrame Player API code asynchronously.</span><span class="hljs-keyword">var</span> tag = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'script'</span>); tag.<span class="hljs-property">src</span> = <span class="hljs-string">"https://www.youtube.com/iframe_api"</span>; <span class="hljs-keyword">var</span> firstScriptTag = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">'script'</span>)[<span class="hljs-number">0</span>]; firstScriptTag.<span class="hljs-property">parentNode</span>.<span class="hljs-title function_">insertBefore</span>(tag, firstScriptTag); <span class="hljs-comment">// 3. This function creates an <iframe> (and YouTube player)</span><span class="hljs-comment">// after the API code downloads.</span><span class="hljs-keyword">var</span> player; <span class="hljs-keyword">function</span><span class="hljs-title function_">onYouTubeIframeAPIReady</span>(<span class="hljs-params"></span>) { player = <span class="hljs-keyword">new</span><span class="hljs-variable constant_">YT</span>.<span class="hljs-title class_">Player</span>(<span class="hljs-string">'player'</span>, { <span class="hljs-attr">height</span>: <span class="hljs-string">'390'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'640'</span>, <span class="hljs-attr">videoId</span>: <span class="hljs-string">'M7lc1UVf-VE'</span>, <span class="hljs-attr">events</span>: { <span class="hljs-string">'onReady'</span>: onPlayerReady, <span class="hljs-string">'onStateChange'</span>: onPlayerStateChange } }); } <span class="hljs-comment">// 4. The API will call this function when the video player is ready.</span><span class="hljs-keyword">function</span><span class="hljs-title function_">onPlayerReady</span>(<span class="hljs-params">event</span>) { <span class="hljs-comment">//event.target.playVideo();</span><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'play'</span>).<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'<a href="#" onclick="play();">Play Video</a>'</span>; } <span class="hljs-keyword">function</span><span class="hljs-title function_">play</span>(<span class="hljs-params"></span>){ player.<span class="hljs-title function_">playVideo</span>(); } <span class="hljs-comment">// 5. The API calls this function when the player's state changes.</span><span class="hljs-comment">// The function indicates that when playing a video (state=1),</span><span class="hljs-comment">// the player should play for six seconds and then stop.</span><span class="hljs-keyword">var</span> done = <span class="hljs-literal">false</span>; <span class="hljs-keyword">function</span><span class="hljs-title function_">onPlayerStateChange</span>(<span class="hljs-params">event</span>) { <span class="hljs-keyword">if</span> (event.<span class="hljs-property">data</span> == <span class="hljs-variable constant_">YT</span>.<span class="hljs-property">PlayerState</span>.<span class="hljs-property">PLAYING</span> && !done) { <span class="hljs-built_in">setTimeout</span>(stopVideo, <span class="hljs-number">6000</span>); done = <span class="hljs-literal">true</span>; } } <span class="hljs-keyword">function</span><span class="hljs-title function_">stopVideo</span>(<span class="hljs-params"></span>) { player.<span class="hljs-title function_">stopVideo</span>(); } </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_8')">Copy</button></pre></div><h2 id="solution_5">Solution 5: </h2><div class="answer-desc"><p>here is link to example <a rel="nofollow noreferrer noopener" href="https://jsfiddle.net/WYwv2/5/">http://jsfiddle.net/WYwv2/5/</a></p><p>Check out this </p><pre><code id="code_9" class="hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span><span class="hljs-tag"><<span class="hljs-name">html</span>></span><span class="hljs-tag"><<span class="hljs-name">body</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span><span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span><span class="hljs-attr">id</span>=<span class="hljs-string">"playvideo"</span><span class="hljs-attr">onclick</span>=<span class="hljs-string">"playme()"</span>></span>Play video<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"><<span class="hljs-name">iframe</span><span class="hljs-attr">id</span>=<span class="hljs-string">"video1"</span><span class="hljs-attr">width</span>=<span class="hljs-string">"520"</span><span class="hljs-attr">height</span>=<span class="hljs-string">"360"</span><span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> ></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-keyword">function</span><span class="hljs-title function_">playme</span>(<span class="hljs-params"></span>) { <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"video1"</span>).<span class="hljs-property">src</span> = <span class="hljs-string">'http://www.w3schools.com/tags/mov_bbb.mp4'</span>; } </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">html</span>></span> ​ </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_9')">Copy</button></pre><p>We set the source of video dynamically.</p></div> </div> <div id='baca-juga'></div> <script> //<![CDATA[ var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}} //]]> </script> <script src='/feeds/posts/summary/-/Iframe?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Jquery?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Youtube Api?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script> showBacaJuga("https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html"); </script> <div id='share-container'> <div class='share-title'> <p class='share-this-pleaseeeee'>Share</p> </div> <div id='share'> <a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html' rel='nofollow noreferrer' title='facebook'> <svg viewBox='0 0 24 24'> <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path> </svg> </a> <a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=Play Iframe Video On Click A Link Javascript&url=https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html' rel='nofollow noreferrer' title='twitter'> <svg viewBox='0 0 24 24'> <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path> </svg> </a> <a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html&media=https://i.ytimg.com/vi/TJ2X4dFhAC0/hqdefault.jpg&description=Play Iframe Video On Click A Link Javascript' rel='nofollow noreferrer' title='pinterest'> <svg viewBox='0 0 24 24'> <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path> </svg> </a> <a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=Play Iframe Video On Click A Link Javascript%20%2D%20https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html' rel='nofollow noreferrer' title='whatsapp'> <svg viewBox='0 0 24 24'> <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path> </svg> </a> <a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html&text=Play Iframe Video On Click A Link Javascript' rel='nofollow noreferrer' target='_blank' title='telegram'> <svg viewBox='0 0 24 24'> <path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path> </svg> </a> </div> </div> <div id='ms-related-post'></div> <script> var postLabels = ["Iframe", "Javascript", "Jquery", "Youtube Api", ]; var relatedConfig = { postUrl: "https://goodbargainhotairpopcornmakers.blogspot.com/2023/08/play-iframe-video-on-click-link.html", homePageUrl: "https://goodbargainhotairpopcornmakers.blogspot.com/", relatedTitleText: "You may like these posts", }; </script> <div id='ms-matched-content'></div> <script> //<![CDATA[ // related post js from www.dte.web.id modified by sugeng.id !function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqv1gIlPHFqWRUlsAKg5p-EV2l2wsHN7CItgN-650FBdMyIJSu8kb0In0q1rymYqlwrO7ln8_NEB3mFk_-SfPj7oSF3eVWc5akf-ElD7a48DjAjcbFw42alVxruoqLS2EKtPLFnhFsWPY/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}(); function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}(); //]]> </script> </div> <section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'> <a name='comments'></a> <h2 class='comments-title'> Post a Comment for "Play Iframe Video On Click A Link Javascript" </h2> <div id='Blog1_comments-block-wrapper'> </div> <div class='comment-footer'> <div class='comment-form default-comment-form'> <a name='comment-form'></a> <a aria-label='comment form' href='https://www.blogger.com/comment/frame/6538281499073760397?po=5141360472244765793&hl=en&skin=contempo' id='comment-editor-src'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'>