Highlighted

HTML5 - Insert Video hosted by Vimeo or YouTube

Community Beginner ,
Apr 06, 2019

Copy link to clipboard

Copied

Hi everyone,

I'd like to insert a video component hosted by Vimeo or YouTube in my HTML5 canvas.

The video component let me upload a video from a folder on my computer but apparently does not allow to insert a hosted video.

Is there a way to arrange this issue?

Thank you in advance

I have done it. The only issue is clicking on the video does take the user to Youtube. The video will be on top by default, and will load a millisecond faster. If you want it to be behind a transparent published Animate object, use z-index.

Just create a player div and position it where you want it to appear.

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

tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {

            height: '184',

            width: '300',

            videoId: '**********',

            playerVars: {

                'autoplay': 1,

'modestbranding':1,

                'controls': 1,

'fs': 0,

'rel': 0

            },

            events: {

                'onReady': onPlayerReady,

                    'onStateChange': onPlayerStateChange

            }

        });

    }

    var playerReady = false;

    function onPlayerReady(event) {

        playerReady = true;

player.mute();

    }

    function onPlayerStateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            <!-- alert('done'); -->

        }

    }

TOPICS
Discussions

Views

796

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

HTML5 - Insert Video hosted by Vimeo or YouTube

Community Beginner ,
Apr 06, 2019

Copy link to clipboard

Copied

Hi everyone,

I'd like to insert a video component hosted by Vimeo or YouTube in my HTML5 canvas.

The video component let me upload a video from a folder on my computer but apparently does not allow to insert a hosted video.

Is there a way to arrange this issue?

Thank you in advance

I have done it. The only issue is clicking on the video does take the user to Youtube. The video will be on top by default, and will load a millisecond faster. If you want it to be behind a transparent published Animate object, use z-index.

Just create a player div and position it where you want it to appear.

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

tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {

            height: '184',

            width: '300',

            videoId: '**********',

            playerVars: {

                'autoplay': 1,

'modestbranding':1,

                'controls': 1,

'fs': 0,

'rel': 0

            },

            events: {

                'onReady': onPlayerReady,

                    'onStateChange': onPlayerStateChange

            }

        });

    }

    var playerReady = false;

    function onPlayerReady(event) {

        playerReady = true;

player.mute();

    }

    function onPlayerStateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            <!-- alert('done'); -->

        }

    }

TOPICS
Discussions

Views

797

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
Apr 06, 2019 0
Adobe Community Professional ,
Apr 08, 2019

Copy link to clipboard

Copied

Hi.

As far as I can tell it's not possible to embed YouTube videos using the video components.

But don't worry because you can use any method available to embed YouTube videos like it's done in regular websites.

Create an iframe with only javascript - Stack Overflow

HTML YouTube Videos

YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers

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...
Apr 08, 2019 1
Enthusiast ,
Apr 08, 2019

Copy link to clipboard

Copied

I have done it. The only issue is clicking on the video does take the user to Youtube. The video will be on top by default, and will load a millisecond faster. If you want it to be behind a transparent published Animate object, use z-index.

Just create a player div and position it where you want it to appear.

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

tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {

            height: '184',

            width: '300',

            videoId: '**********',

            playerVars: {

                'autoplay': 1,

'modestbranding':1,

                'controls': 1,

'fs': 0,

'rel': 0

            },

            events: {

                'onReady': onPlayerReady,

                    'onStateChange': onPlayerStateChange

            }

        });

    }

    var playerReady = false;

    function onPlayerReady(event) {

        playerReady = true;

player.mute();

    }

    function onPlayerStateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            <!-- alert('done'); -->

        }

    }

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...
Apr 08, 2019 1
New Here ,
Apr 11, 2019

Copy link to clipboard

Copied

You will need to have an explicit player configured to accommodate your video since your video is from a website that doesn't let you access to actual video files

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...
Apr 11, 2019 0