Forum Discussion
Add JavaScript to Youtube video
Hi,
I need to embed Youtube video in screen and after completing the screen a variable value will change.
How can I use JavaScript in webObject?
Here is some code you can use to do this. Insert this into your storyline file as a webobject... For some reason using a boolean variable doesn't work well in Storyline, so I just use a Text variable. Here is example: https://360.articulate.com/review/content/c0db799e-4921-4dbc-8fa4-00c38edbb76b/review
<html><head><style>html, body {margin: 0 0 0 0;overflow:hidden;}</style></head><body><div id="player"></div>
<script src="https://www.youtube.com/player_api"></script>
<script>
// create youtube player var isComplete = false; var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '100%', width: '100%', playerVars: {rel:0}, videoId: '_kwZ-xeOj8Y', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
//autoplay video function onPlayerReady(event) { event.target.playVideo(); }
// when video ends function onPlayerStateChange(event) { if(event.data === 0) { var isComplete = true; console.log(isComplete); var player = parent.GetPlayer(); player.SetVar("videoIsComplete","Yes"); } }
</script></body></html>
Hi Will, I am trying to figure this out. Where do you put the Javascript, it is not in your .story file below. I am trying to figure out how to jump to the next slide or enable the next button once the YouTube video completes. Thanks
Samantha - I was struggling with this too, and found this helpful video on YouTube: https://youtu.be/_4e0DSJp3cY
Hi Adam - i found this tutorial also but cannot get it to work! What's the trick?
two years later and now ive got it working!
