Skip to main content
J
jpeters99
Participating Frequently
February 11, 2020
Answered

Link a youtube video to Adobe Animate HTML5

  • February 11, 2020
  • 1 reply
  • 3092 views

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!

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
JoãoCésar17023019Correct answer
Community Expert
February 11, 2020

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

    J
    jpeters99Author
    Participating Frequently
    February 11, 2020

    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!

      JoãoCésar17023019
      JoãoCésar17023019
      Community Expert
      February 11, 2020

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices