Embedded YouTube Video javascript questions


(Ollie) #1

Hi there,

I have an embedded YouTube video (in a rectangle element) which currently is set behind a cover image. When the cover image is clicked it triggers the Youtube video to autoplay and then the cover images fades out. The javascript then detects when the video has finished and reverses the fade in of the cover image.

I have noticed that if changing scene or flexible layouts that the video’s audio will still play. I have found the following javascript below to try and resolve it, however when in conjunction with the other javascript I am using to play the video it doesn’t seem to be working.

Javascript to play video and fade cover image in and out - set on layout load:

function PlayYouTubeVideo(hypeDocument, element, event) {

if (window.YT) {
    // Apparently, the API was ready before this script was executed.
    // Manually invoke the function
    my = {};
    onYouTubePlayerAPIReady();
}

function onYouTubePlayerAPIReady(){
	my.player = new YT.Player('MyVideo', {
		height: '315',
		width: '560',
		videoId: 'Op0GI9FSCSA',
		playerVars: { 'autoplay' : 1, 'controls' : 0, 'showinfo' : 0, 'rel' : 0 },
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	})
}


function onPlayerReady(event) {
	// event.target is the iframe and div created from the code above
	event.target.stopVideo();
}

function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.ENDED) {
		hypeDocument.startTimelineNamed('Film', hypeDocument.kDirectionReverse)
		console.log("video ended")
	}
}

Javascript to Stop Audio - set on layout unload:

function StopAudio(hypeDocument, element, event) {
var emptyInnerHTML = '';
hypeDocument.getElementById("MyVideo").innerHTML = emptyInnerHTML

Any suggestions would be great.

Thanks


#2

Can you share a document with this all setup so we can see how you’re executing it?