CODEWITHSUNDEEP
javascriptjquerykeypress
J82
J82

Reputation: 8457

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

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>

Upvotes: 0

Views: 227

Answers (2)

DarylF
DarylF

Reputation: 726

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

Upvotes: 1

kamasheto
kamasheto

Reputation: 1030

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

Upvotes: 0

Related Questions