Simulate keypress action along with normal action when user clicks on a div?

Question

I have this code set up so that when the user clicks on the .close-video div, another div (#feat-video) fades out. However, the problem is that the div contains a YouTube video and the video keeps playing even after closing the div. I'm wondering if there is a way I can possibly simulate a keypress action (spacebar) when .close-video is clicked so that the video stops playing. Is there some way to incorporate it into this code? I tried incorporating .keypress but was unsuccessful and I'm not even sure if that's the correct event to use.

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500).hide();
    $('.video-play-container').fadeIn(500).show();
});

Here is a graphic I made to illustrate. enter image description here

HTML

<section id="intro" role="banner">
    <div class="section-wrap">
        <span class="tagline">Two Artists. Two Styles. One Remix</span>
        <div class="video-play-container">
            <div class="video-play-border">
                <div class="video-play"></div>
            </div>
        </div>
        <div id="feat-video" style="display:none">
            <span class="close-video"></span>
            <?php print TubePressPro::getHtmlForShortcode('youtubeHideBlackBars="true"'); ?>
        </div>
    </div><!-- .section-wrap -->
</section><!-- #intro -->

Edit: Here's the output for the iframe which embeds the YouTube video.

<iframe id="tubepress-video-object-434992883" data-videoid="hSPnHlDDAsc" data-playerimplementation="youtube" data-videoprovidername="youtube" class="youtube-player" type="text/html" width="940" height="530" src="https://www.youtube.com/embed/hSPnHlDDAsc?wmode=opaque&amp;autohide=2&amp;autoplay=1&amp;enablejsapi=1&amp;fs=1&amp;loop=0&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;origin=http%3A%2F%2Fstaging.site.com" frameborder="0" allowfullscreen=""></iframe>

Why simulate a keypress? Isn't there a function you can call on the video element to tell it to stop playing? — Barmar, Sep 11 '14 at 10:40
possible duplicate of [Stop a youtube video with jquery?](http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery) — Justinas, Sep 11 '14 at 10:40
@Barmar I thought a keypress would be nice and simple since I'm still learning jQuery. I am not sure how to call a function on the video element to tell it to stop playing. — J82, Sep 11 '14 at 10:46
Edit your question to show the HTML code for #feat-video. If you do this I can edit my answer to be more specific. — DarylF, Sep 11 '14 at 10:50
@DarylF Done, thank you. Edit: Oh wait, did you mean the source code for the output? — J82, Sep 11 '14 at 10:52
Is there any reason you're using PHP to get the video from YouTube instead of embedding it? — DarylF, Sep 11 '14 at 10:56
@DarylF I like the "video gallery" feature of the plugin and it can automatically pull videos from YouTube which will line up the four upcoming videos below the main one. — J82, Sep 11 '14 at 10:57
That's ok, but for my answer to work you're going to need to reference the video player, usually with the ID attribute. — DarylF, Sep 11 '14 at 11:11
@DarylF Do you mean the ID of the div that holds the player or the ID of the iframe player itself? — J82, Sep 11 '14 at 16:16
@DarylF I think you meant the latter so I included the iframe code into the post above. However, the numbers in the ID on there changes with every page load, so I'm not sure how that would work. Maybe we could use the `.youtube-player` class in some way? I tried inserting that in place of `#playerID` in your code below but it didn't work. Clicking on the close button now did nothing. — J82, Sep 11 '14 at 22:31

score 1 · Answer 1 · edited May 23 '17 at 10:26

If the YouTube video within #feat-video has the id="playerID" then you could use this code.

$('#playerID').stopVideo();

Which would make you code look something like this:

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#playerID').stopVideo();
    $('#feat-video').fadeOut(500).hide();
    $('.video-play-container').fadeIn(500).show();
});

Change playerID to whatever the video is referred to..

To answer your direct question, you can simulate a key press like so:

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 32;
$("whatever").trigger(press);

In your case "whatever" will be reference to the video element.

This was taken from a previous question, Simulate Keypress With jQuery

score 0 · Answer 2 · answered Sep 11 '14 at 10:41

0

If you don't need the video any more you could empty the DOM element altogether. The proper way however would be to use the Youtube JS Player API

answered Sep 11 '14 at 10:41

kamasheto

1,020
6
12

I will still need the video there because the user might want to click it open again. I'll take a look at the API, although I must say, I'm still new to this stuff. – J82 Sep 11 '14 at 10:46

Simulate keypress action along with normal action when user clicks on a div?

2 Answers2