Highlighted

Link a youtube video to Adobe Animate HTML5

Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

I am in desparate need of help. How Do I either:

1) create a button to link to a specific youtube video? I tried this and it has not worked. 

2) add the youtube video to my Animate file?

I am creating an interactive and one page will have a 3D animation that I want to link too. Please help!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Here is an example:

 

var root = this;
var videoURL = 'https://www.youtube.com/watch?v=F6X3iCKyY6Q';
var embedURL = '<iframe width="560" height="315" src="https://www.youtube.com/embed/F6X3iCKyY6Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

root.embedVideo = function(url, style)
{
	var key;
	var element = document.createElement('div');
	
	canvas.parentNode.appendChild(element);
	element.innerHTML = url;	
		
	for (key in style)
		element.style[key] = style[key];
};

root.viewButton.on('click', function (e)
{
	window.open(videoURL, '_blank');
});

root.stop();
root.embedVideo(embedURL, {position: 'relative', left: (canvas.width - 560) * 0.5 + 'px', top: (canvas.height - 315) * 0.5 + 'px'});

 

 

Download the FLA / source / files here:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/youtube_video

 

 

Regards,

JC

TOPICS
Code, How to

Views

186

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Link a youtube video to Adobe Animate HTML5

Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

I am in desparate need of help. How Do I either:

1) create a button to link to a specific youtube video? I tried this and it has not worked. 

2) add the youtube video to my Animate file?

I am creating an interactive and one page will have a 3D animation that I want to link too. Please help!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Here is an example:

 

var root = this;
var videoURL = 'https://www.youtube.com/watch?v=F6X3iCKyY6Q';
var embedURL = '<iframe width="560" height="315" src="https://www.youtube.com/embed/F6X3iCKyY6Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

root.embedVideo = function(url, style)
{
	var key;
	var element = document.createElement('div');
	
	canvas.parentNode.appendChild(element);
	element.innerHTML = url;	
		
	for (key in style)
		element.style[key] = style[key];
};

root.viewButton.on('click', function (e)
{
	window.open(videoURL, '_blank');
});

root.stop();
root.embedVideo(embedURL, {position: 'relative', left: (canvas.width - 560) * 0.5 + 'px', top: (canvas.height - 315) * 0.5 + 'px'});

 

 

Download the FLA / source / files here:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/youtube_video

 

 

Regards,

JC

TOPICS
Code, How to

Views

187

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Hi.

 

Here is an example:

 

var root = this;
var videoURL = 'https://www.youtube.com/watch?v=F6X3iCKyY6Q';
var embedURL = '<iframe width="560" height="315" src="https://www.youtube.com/embed/F6X3iCKyY6Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

root.embedVideo = function(url, style)
{
	var key;
	var element = document.createElement('div');
	
	canvas.parentNode.appendChild(element);
	element.innerHTML = url;	
		
	for (key in style)
		element.style[key] = style[key];
};

root.viewButton.on('click', function (e)
{
	window.open(videoURL, '_blank');
});

root.stop();
root.embedVideo(embedURL, {position: 'relative', left: (canvas.width - 560) * 0.5 + 'px', top: (canvas.height - 315) * 0.5 + 'px'});

 

 

Download the FLA / source / files here:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/youtube_video

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 1
Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

Thank you for this! 

How can I change where the video is shown in the browser? I would like it to be in the center of the page. 

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

You're welcome!

 

Replace this method call...

root.embedVideo(embedURL, {position: 'relative', left: (canvas.width - 560) * 0.5 + 'px', top: (canvas.height - 315) * 0.5 + 'px'});

 

... by this one and the video should be centered:

root.embedVideo(embedURL, {position: 'absolute', left: "50%", top: "50%", transform:"translate(-50%, -50%)"});

 

If this doesn't work, you can try any valid CSS to achieve what you want.

 

Please let me know if you have any further questions.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0
Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

It worked! Thank you so much. I have been trying for days to figure this out. 

Thanks Again JC!

 

Best,

JP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Awesome!

 

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0
Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

Sory for another question.

If I want this animation to be only available on one page on my interactive and not the others, do I need to create a symbol for it to target to only be visible on that page? 

Thank you,

JP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Just so you know, that style-setting loop can be replaced with just assigning a CSS style string to style.cssText. Like in this function I've posted a few times:

// Create a DIV layer above the canvas
// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)
// CSS styling is a CSS-formatted literal string
mkDiv = function(id, x, y, w, h, html, css) {
	var d = document.createElement("div");
	d.id = id;
	d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");
	d.innerHTML = html;
	canvas.parentNode.appendChild(d);
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 1
Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

The code above, was working in a test file. I tried to add it to my working file and it broke it. I don't know what I am doing wrong. I just need to add a video to one page of my interactive. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Nice, Clay!

 

It's indeed easier using this cssText property. Thanks.

 

@jpeters99

Can you provide more details about your code structure?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0