0

So it took me forever but I was able to get it so that when you click a link on my page it pauses the video playing in the youtube iframe embed. However, on my page I have multiple videos and they are retrieved via a loop. How would I go about when click the link all of the videos stop, regardless of where they are.

Right now the link only works when there is one video in the loop, once I introduce 2, it stops working.

Here is my javascript

/*
 * @author       Rob W (http://stackoverflow.com/a/7513356/938089
 * @description  Executes function on a framed YouTube video (see previous link)
 *               For a full list of possible functions, see:
 *               http://code.google.com/apis/youtube/js_api_reference.html
 * @param String frame_id The id of (the div containing) the frame
 * @param String func     Desired function to call, eg. "playVideo"
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
        "event": "command",
        "func": func,
        "args": args || [],
        "id": frame_id
    }), "*");
}
}

And my code

<div id="work">
<? $rows = $db->fetch_all_array($work_sql);
foreach($rows as $record){
    $vimeo = "Vimeo";
    $youtube = "Youtube"; ?>
    <h3 onClick="javascript:void callPlayer('ytplayer','pauseVideo')">
        <a id="clickable" href="javascript:void callPlayer('ytplayer','pauseVideo')">
            <div class="workitem">
                <span class="mosaic-overlay">
                    <div class="details">
                        <? echo stripslashes ( "
                        <span class='title'>$record[title]
                        </span>
                    <br />
                        <span class='subtitle'>$record[subtitle]
                        </span>
                    </div>
                </span>
                <span class='mosaic-backdrop'>
                    <img src='img/work/$record[image]' />
                </span>
            </div>
        </a>
    </h3>
    <div class='player'>
        <div class='playertitle'>$record[title] - $record[subtitle]</div>
        <div class='video'>

                            <div id='ytplayer'><iframe width='531' height='325' src='http://www.youtube.com/embed/$record[code]?enablejsapi=1&rel=0&wmode=transparent&showinfo=0&showsearch=0&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>

            </div>

        </div>");
} ?>

any suggestions would be great

Chris James Champeau
  • 984
  • 2
  • 16
  • 37
  • The reason why it doesn't work is because of: var iframe = document.getElementById(frame_id); Where it only gets the ID, and to correct css you should only have one ID on every page. And said jquery will only stop the first one it encounters. I made the jquery stop only the current playing player, and each player has its own ID. I hope that helps. – weston deboer Aug 22 '12 at 23:56
  • You can see what I did at http://beta.studionumberone.com/portfolio/dewars/ if you scroll to the 10th and 11th slide those both have youtube videos on them. – weston deboer Aug 22 '12 at 23:58

0 Answers0