1

A fellow Stack Overflow member kindly created a working script that reveals a hidden div when a Youtube video completes. It's pretty cool check it out here. here. How would I take the following code and place it in the head so that I can create a short code that would reference this javascript in WordPress? Currently, its setup to run in the body of the page. WordPress does not like to work that way.

The end game is to see the embedded youtube video and then when the video completes it reveals the hidden div. I'm not convinced I'm approaching this the right way. I bow to your opinion if you think there's a better way.

Below is the code

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            $('html, body').animate({
                scrollTop: $("#elementtoScrollToID").offset().top
            }, 2000);
        }
    }

</script>

<div id='elementtoScrollToID' class='my_div'> Hello! </div>
Scott Fichter
  • 51
  • 11

1 Answers1

0

You can apply your javascript function by downloading some plugin. see this page https://www.ostraining.com/blog/wordpress/custom-js/

Hasby Fahrudin
  • 50
  • 6
  • Yep! I'm with you 100%. I actually downloaded that plugin but.... it puts me right back to my original question because this script is designed to run in the body of the HTML document and not in the head. My orignal question is how do I modify this JS script to run in the head so that I can place it as a short code in the body of the page for WordPress. The script currently will not run in the head. Thanks man... – Scott Fichter Aug 11 '17 at 14:10
  • i see what you mean. This might be help you man .. https://stackoverflow.com/questions/28737066/youtube-iframe-api-and-wordpress – Hasby Fahrudin Aug 11 '17 at 16:58