Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Autoplay oEmbed video on jQuery click event

Here is a live example: http://test.lt11.com/five-ten-the-ice-caves/

In the 1st slide of the carousel there is an image with a "View Video" button on top that once clicked-- the image and button fade away to reveal a video. Using the following jQuery code to do so:

$(document).ready(function(){

$("#play").click(function(){ $("#post_video").toggleClass("post_video_visible"); $("#play").toggleClass("hidden"); }); });

What I would like to make happen, is once the button is clicked and video is revealed--the video starts to play. I'm embedding the videos utilizing oEmbed and the wp_oembed_get() wordpress function. Here is the code:

$embed_code = get_post_meta($post->ID, "_cmb_video_embed", true);
$video_embed = wp_oembed_get( $embed_code );
$header_img = get_post_meta($post->ID, "_cmb_header_img", true);
$slides = get_post_meta($post->ID, "_cmb_file_list", true );

//IF BOTH SLIDES AND A VIDEO ARE PRESENT
if ( $slides != '' && $video_embed != '' ) { ?>

<div class="row">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <?php
            $i = 1;
            echo '<li data-target="#carousel" data-slide-to="0" class="active"></li>';
            foreach ( (array) $slides as $key => $slide ) { 
                echo '<li data-target="#carousel" data-slide-to="'; ?><?php echo $i++; ?><?php echo '"></li>';
                } //end foreach
        ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <?php 
        echo '<div class="item item-wrap active">';
        if ( $header_img != '' ) {
            echo '<div class="post_header_img_wrapper">';
            echo '<div class="post_header_img">';
            echo '<img class="stretch" src="'; ?><?php echo $header_img; ?><?php echo '">';
            echo '<div class="play-video-wrap">';
            echo '<button id="play" type="button" class="btn btn-default">View Video</button>';
            echo '</div>'; //end .play-video-wrap
            echo '</div>'; //end .post_header_img
            echo '</div>'; //end .post_header_img_wrapper
            } //end if
        echo '<div id="fitvid" class="post_video_wrapper">';
        if ( $header_img == '') {
            echo '<div class="post_video_visible">';
            } //end if
        else {
            echo '<div id="post_video" class="post_video">';
            } //end else
        echo $video_embed;
        echo '</div>'; //end .post_video
        echo '</div>'; //end .post_video_wrapper
        echo '</div>'; //end .item active

        foreach ( (array) $slides as $key => $slide ) {
                echo '<div class="item item-wrap">';
                echo '<div class="item-inner">';
                echo '<img class="slider-img" src="'; ?><?php echo $slide; ?><?php echo'">';
                echo '</div>'; //end .item-inner
                echo '</div>';//end .item-wrap
                } //end foreach 
    ?>

Is there a way to some how pass an autoplay variable or something into the oEmbed URL or embed/iframe code to make the video play once the button is clicked? Thanks for the help!

User Gravatar

bigchokeslam

Posted Jun 11 2014 15:54 UTC

$50


  • Assigned To tripflex
  • Solved
  • javascript
    jquery
    php
  • 5342 Views

10 Replies


You're going to need the Youtube API to do this;

https://developers.google.com/youtube/iframe_api_reference?csw=1#Getting_Started

Once you have that up and running, something like this should do.

$('button#play').on('click', function(){ setTimeout(function(){ ytPlayer.playVideo(); },300) });

User Gravatar

graham-p-heath

Posted Jun 11 2014 16:02 UTC

Not necessarily, there's a lot of ways to handle this.

My first thought is why are you loading the video on to the page if it's not necessary? As in, people may not even click the button so why have the video already loaded but hidden?

The way I would have done it is to inject the video with jQuery when someone does click the button, that way you can just append autoplay to the url and voila!

Something like this:

<?php

$embed_code = get_post_meta($post->ID, "_cmb_video_embed", true);
$video_embed = wp_oembed_get( $embed_code );
$header_img = get_post_meta($post->ID, "_cmb_header_img", true);
$slides = get_post_meta($post->ID, "_cmb_file_list", true );

//IF BOTH SLIDES AND A VIDEO ARE PRESENT
if ( $slides != '' && $video_embed != '' ) {
$video_frame = str_replace('feature=oembed', 'feature=oembed&autoplay=1', $video_embed);
?>

<script>
jQuery(function($){
    $("#play").click(function(){
        $("#post_video").html('<?php echo $video_frame; ?>');
    });
})
</script>

<div class="row">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <?php
            $i = 1;
            echo '<li data-target="#carousel" data-slide-to="0" class="active"></li>';
            foreach ( (array) $slides as $key => $slide ) { 
                echo '<li data-target="#carousel" data-slide-to="'; ?><?php echo $i++; ?><?php echo '"></li>';
                } //end foreach
        ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <?php
        echo '<div class="item item-wrap active">';
        if ( $header_img != '' ) {
            echo '<div class="post_header_img_wrapper">';
            echo '<div class="post_header_img">';
            echo '<img class="stretch" src="'; ?><?php echo $header_img; ?><?php echo '">';
            echo '<div class="play-video-wrap">';
            echo '<button id="play" type="button" class="btn btn-default">View Video</button>';
            echo '</div>'; //end .play-video-wrap
            echo '</div>'; //end .post_header_img
            echo '</div>'; //end .post_header_img_wrapper
            } //end if
        echo '<div id="fitvid" class="post_video_wrapper">';
        if ( $header_img == '') {
            echo '<div class="post_video_visible">';
            } //end if
        else {
            echo '<div id="post_video" class="post_video">';
            } //end else
        echo '</div>'; //end .post_video
        echo '</div>'; //end .post_video_wrapper
        echo '</div>'; //end .item active

        foreach ( (array) $slides as $key => $slide ) {
                echo '<div class="item item-wrap">';
                echo '<div class="item-inner">';
                echo '<img class="slider-img" src="'; ?><?php echo $slide; ?><?php echo'">';
                echo '</div>'; //end .item-inner
                echo '</div>';//end .item-wrap
                } //end foreach 
    ?>

Another option would be to add a filter for oembed to add autoplay, but that also would require the video being loaded WHEN the button is clicked, not when the page is loaded:

http://www.limecanvas.com/passing-parameters-to-a-video-link-in-a-wordpress-custom-field/

User Gravatar

tripflex

Posted Jun 11 2014 16:36 UTC

Solution

This didn't solve your task? Get your own custom solution.

You can potentially add the autoplay=1 attribute onto your _cmb_video_embed custom field.

From the forums this doesn't always work so you may need to add a custom filter into your functions.php to catch and append the autoplay parameter:

function modify_youtube_embed_url($html) {
    return str_replace("?feature=oembed", "?feature=oembed&autoplay=1", $html);
}
add_filter('oembed_result', 'modify_youtube_embed_url');

Or update your get embed call with an array of arguments holding the autoplay param:

$video_embed = wp_oembed_get( $embed_code, array( 'autoplay' => 1) );

Hope that's helpful, Cheers

User Gravatar

nightbook2333

Posted Jun 11 2014 16:36 UTC

Using the autoplay argument will not work without a custom filter, I already checked the code in WP 3.9.1 and it only accepts width and height

User Gravatar

tripflex

Posted Jun 11 2014 16:44 UTC

please take a look at the jsfiddle demo.
you can see its source code in http://jsfiddle.net/a2WZV/11/.

what i have done is :

In HTML i have removed the content in the div <div id="post_video" class="post_video">:

    <iframe src="https://www.youtube.com/embed/zwkxYsmwS_c?feature=oembed" frameborder="0" allowfullscreen></iframe>

and when play button click, add it dynamically using jquery with the extra parameter autoplay=1

$(document).ready(function () {
    $("#play").click(function () {
        $("#post_video").toggleClass("post_video_visible").html('<iframe width="100%" height="100%"  src="https://www.youtube.com/embed/zwkxYsmwS_c?feature=oembed&autoplay=1" frameborder="0" allowfullscreen></iframe>');
        $("#play").toggleClass("hidden");
    });
});
User Gravatar

suhailvs

Posted Jun 11 2014 23:52 UTC

update to my previous answer

the fiddle Demo

Functionalities added:

  • When play button clicks, it hides and youtube video is appended to the div #post_video
  • when the slider changes from the youtube video frame, the youtube div #post_video is cleared. so the the youtube video will not keep playing.
  • when the slider slide to youtube video frame, show the #play button. so that user can click it and again video is appended to the div #post_video

The jquery code: [remove the alerts functions(they are just for clarity)]

$(document).ready(function () {
$("#play").click(function () {
    $("#post_video").html('<iframe width="100%" height="100%"  src="https://www.youtube.com/embed/zwkxYsmwS_c?feature=oembed&autoplay=1" frameborder="0" allowfullscreen></iframe>');
    $("#post_video").addClass("post_video_visible");
    $("#play").hide();
});
$('#carousel').on('slide.bs.carousel', function (e) {
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    console.log(slideFrom + ' => ' + slideTo);
    if (slideFrom == 0) {
        alert('out of video. n remove the youtube frame or else it will keep playing');
        $("#post_video").empty();

    } else if (slideTo == 0) {
        alert('into the video.n Just show the play button.');
        $("#play").show();
    }
});
User Gravatar

suhailvs

Posted Jun 12 2014 6:12 UTC

Thanks so much for your help so far guys! Tripflex, trying to implement your answer. Based on the code you provided me with here are the issues I am running into now:

Essentially its working! The video just doesn't resize to fit the parent container. I'm guessing this is because the fitvid.js jQuery plugin I am using to automatically resize the oEmbeds is being loaded and executed before the button is clicked, so thus the video doesn't re-size? Is there a way to load the fitvid jQuery function when the button is clicked? I'm assuming yes but not sure about the syntax...

User Gravatar

bigchokeslam

Posted Jun 12 2014 11:23 UTC

Hey hey! Go me. I was right. Just modified your code tripflex like this:

jQuery(function($){
    $("#play").click(function(){
        $("#post_video").html('<?php echo $video_frame; ?>');
        $("#fitvid").fitVids();
        });
    })

And it worked! Woohoo! :)

User Gravatar

bigchokeslam

Posted Jun 12 2014 11:29 UTC

EDIT: Just saw your response, glad to hear it's working :)

Yeah that's easy to fix, just add your fitvid JS (didn't see it in code above) where indicated below:

<script>
jQuery(function($){
    $("#play").click(function(){
        $("#post_video").html('<?php echo $video_frame; ?>');
        // ADD YOUR FITVID CODE HERE
    });
});
</script>
User Gravatar

tripflex

Posted Jun 12 2014 11:32 UTC

Glad to hear you solved the problem... @bigchokeslam. Take a look at the fiddle demo i created(worked around 3hours to create that fiddle). it might be helful for you.

for example if you click the play button and click the next image button, i hope the video won't stop. I fixed those problems too.

User Gravatar

suhailvs

Posted Jun 12 2014 12:26 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions