0

Totally new to WP, need help with WP Video Short Code. I got my video on my webpage, got it the right size, got it to play, and it resets to the beginning when it finishes playing. My problem is, after it plays, I want it to reset to the "Video Poster" it's on when the page first loads. Does anyone know how I can make it do that? (Please explain in beginner terms because I don't know hardly anything about WP or writing code or placing code... again, total beginner, so tell me FULL DETAIL as if I'm stupid! Thanks!)

  • Please include the shortcode that you've used. – Junaid Jul 3 '17 at 5:33
  • Is this what you mean? (Sorry I am new to all this): codex.wordpress.org/Video_Shortcode Then I used this for the video poster: [video poster="yeswolfcopywriters.com/wp-content/uploads/2017/01/…" width="1525" height="850"][/video] It all works but when the video finishes playing, it resets to the top of the video without putting the video poster back up. I want it to go back to the video poster. Any help greatly appreciated. – Van Jul 6 '17 at 21:03
1

There's no straight forward way of doing this but we can achieve this with a small JS snippet. You can add the following JS snippet in your footer to make it work with all videos in your content.

var videos = document.getElementsByTagName('video');
for (var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('ended', function(e) {
        e.target.load();
    });
}

What does this code do?

The above snippet register ended event on all videos it can find and just loads the video when it ends.

To make it more seamless, we can filter the_content if any [video][/video] shortcode is used, if so, then include this code, otherwise not.

Add the following code to your functions.php or in a custom plugin:

function ja_video_shortcode_check( $content ) {

    if ( has_shortcode( $content, 'video' ) ) {
        add_action( 'wp_footer', function(){
            echo "<script>
                    var videos = document.getElementsByTagName('video');
                    for (var i = 0; i < videos.length; i++) {
                        videos[i].addEventListener('ended', function(e) {
                            e.target.load();
                        });
                    }
                </script>";
        } );
    }

    return $content;
}
add_filter( 'the_content', 'ja_video_shortcode_check' );

Tested in fresh WP instance using TwentySeventeen theme with no plugins activated.

To add this code in a widget, add a Text widget, toggle to the Text view and paste the following code:

<script>
   var videos = document.getElementsByTagName('video');
    for (var i = 0; i < videos.length; i++) {
        videos[i].addEventListener('ended', function(e) {
            e.target.load();
        });
    }
</script>
  • Thank you so much for this -- but I am so new to this, I am not sure how to use what you have sent me. Can you explain it to me step by step, please? Exactly where do I put this? This is what it says on the page now... [video poster="yeswolfcopywriters.com/wp-content/uploads/2017/01/…" width="1525" height="850"][/video] – Van Jul 7 '17 at 5:10
  • Sorry, it didn't show you the whole string. I have 3 footer boxes across the bottom that appear on every page of the website. Does it matter which one i put the top string you sent in? And the string does use [/video], so how do I use the bottom section you sent. Again, sorry to be so stupid, just new to all this and need help. Seems like it should be fairly easy but I guess not. – Van Jul 7 '17 at 5:14
  • Add the second code snippet to your theme's functions.php file, a tutorial on how to do this, click here – Junaid Jul 7 '17 at 5:21
  • Can it be placed in one of my Footer Widgets? – Van Jul 7 '17 at 5:39
  • I updated the answer. Check the code at bottom. – Junaid Jul 7 '17 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.