Can’t Figure Out How to Pause YouTube Video on Click

2 Views

My users are using the old embed method of utilizing the tag YouTube gives you instead of the iframe. I’m trying to figure out how to detect the player state (when it’s paused, playing etc) when a user interacts with it so I can pause the video when the user clicks to the next slide.

Currently using WordPress I have a metabox that allows them to paste in the YouTube embed code and then I output that block of code onto the slider. I’m working on my localhost (example: http://mysite.dev). Something to know is that potentially the user could have multiple videos on the slider.

Read More

For the life of me I can’t get the YouTube API to execute.

1) This is the youtube embed object they are pasting into the box 

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2) This video is in a slider I made with a div of: 

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

I’m using JQuery and I’ve tried calling the API like so: 

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

I have a function called stopCycle contained within a jQuery(document).ready(function($) {}); code block and it’s this function that I need to call when the user clicks to the next slide.

So here are my questions:

  1. Do I need to call any external JavaScript file?
  2. Within my JQuery document ready block how can I call the the YouTube api to check to see if the video is playing?
  3. Is there anything else that I am missing in my code or something that you need to see?

I’m wondering if it would be better to have them only enter the YouTube URL and then I’ll output the video using JQuery SWFObject. What I don’t know how to do is loop out the video for each slide (total of 5). So if they had a video for each slider how would I do that?

I know… totally loaded full of questions here.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. From what I see you have an error:

    ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

    Then you can use any of the api calls here, and everything should work fine and dandy

    The reason why you cannot use a jQuery selector for this is because the is expecting an <embed> element. What jQuery returns is an array of all elements matching the selector.

    To answer your questions:

    • 1) Not unless you have your js in an external file
    • 2) To get the current video ytplayer .getVideoUrl()
    • 3) as said previously
    • 4/5) You can setup a playlist using this: ytplayer .cuePlaylist

  2. If you’re using the Youtube API, you should be able to pause the video like this:

    var ytplayer = document.getElementById("myytplayer");
pauseVideo = function(){
    if (ytplayer){
        ytplayer.pauseVideo();
    }
}

<a href="javascript:void(0);" onclick="pauseVideo();">Pause</a>

    See here for details:
    http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

    EDIT

    If the embedded player does not have an ID, you can try something like this:

    function onYouTubePlayerReady(playerId) {
    $("#" + playerId)[0].addEventListener('onStateChange', "(function(state) { return playerState(state, '" + playerId + "'); })");
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}

  3. $('iframe').each(function(i,e){
    let iframeSrc = $(e).attr('src');
    $(e).attr('src',iframeSrc);
});

    This will reset src for all videos, you can modify it to target only one

    let iframeSrc = $('.youtube_video').attr('src');
$('.youtube_video').attr('src',iframeSrc);

    Replace the class ‘.youtube_video’ with your actual iframe class

    Note: Don’t forget to trigger this on click event