StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">YouTube Frame API</a> <em>does</em> support <strong>existing frames</strong>. To improve the usage, I have created some helper functions. Have a look at the code + comments below and the demo: <a href="http://jsfiddle.net/YzvXa/197" rel="nofollow noreferrer">http://jsfiddle.net/YzvXa/197</a></p> <p>To bind functions to existent frames, you <strong>have to</strong> pass an ID reference to the frame. In your case, the frame is contained within a container with <code>id="tab2"</code>. I have defined a custom function for an easier implementation:</p> <pre><code>function getFrameID(id){ var elem = document.getElementById(id); if (elem) { if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK // else: Look for frame var elems = elem.getElementsByTagName("iframe"); if (!elems.length) return null; //No iframe found, FAILURE for (var i=0; i<elems.length; i++) { if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break; } elem = elems[i]; //The only, or the best iFrame if (elem.id) return elem.id; //Existing ID, return it // else: Create a new ID do { //Keep postfixing `-frame` until the ID is unique id += "-frame"; } while (document.getElementById(id)); elem.id = id; return id; } // If no element, return null. return null; } // Define YT_ready function. var YT_ready = (function() { var onReady_funcs = [], api_isReady = false; /* @param func function Function to execute on ready * @param func Boolean If true, all qeued functions are executed * @param b_before Boolean If true, the func will added to the first position in the queue*/ return function(func, b_before) { if (func === true) { api_isReady = true; while (onReady_funcs.length) { // Removes the first func from the array, and execute func onReady_funcs.shift()(); } } else if (typeof func == "function") { if (api_isReady) func(); else onReady_funcs[b_before?"unshift":"push"](func); } } })(); // This function will be called when the API is fully loaded function onYouTubePlayerAPIReady() {YT_ready(true)} // Load YouTube Frame API (function() { // Closure, to not leak to the scope var s = document.createElement("script"); s.src = (location.protocol == 'https:' ? 'https' : 'http') + "://www.youtube.com/player_api"; var before = document.getElementsByTagName("script")[0]; before.parentNode.insertBefore(s, before); })(); </code></pre> <p><code>//</code> Previously, core functions were defined. Look ahead for the implementation:</p> <pre><code>var player; //Define a player object, to enable later function calls, without // having to create a new class instance again. // Add function to execute when the API is ready YT_ready(function(){ var frameID = getFrameID("tabs2"); if (frameID) { //If the frame exists player = new YT.Player(frameID, { events: { "onStateChange": stopCycle } }); } }); // Example: function stopCycle, bound to onStateChange function stopCycle(event) { alert("onStateChange has fired!\nNew state:" + event.data); } </code></pre> <p>If you want to invoke additional functions at a later point, e.g. mute a video, use:</p> <pre><code>player.mute(); </code></pre> <ul> <li>If you only have to call <strong>simple single-direction</strong> functions, it's not necessary to use this code. Instead, use the function <code>callPlayer</code> as defined at <strong><a href="https://stackoverflow.com/questions/7443578/youtube-iframe-api-control-a-iframe-player-thats-already-in-the-html#7513356">this answer</a></strong>.</li> <li>If you want to implement this feature for <strong>multiple frames</strong>, simultaneously, have a look at <strong><a href="https://stackoverflow.com/questions/8948403/youtube-api-target-existing-iframe#8949636">this answer</a></strong>. <em>Also includes a detailed explanation of <code>getFrameID</code> and <code>YT_ready</code></em>.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload