HTML video tag display Youtube video

1
votes

I got some youtube urls, such as https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg. When I put it to html video tag, it said "Invalid source".

How to solve this problem?

When I used iframe to display videos, I had another problem as described here: Video not showing in iframe on IE, but showing on firefox and chrome.

This is my HTML:

<video width="300" height="auto" autoplay="" controls="" name="media"><source src="https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg"></video>
2
htmliframeyoutube

2 Answers

2
votes

You can't use the HTML5 video tag for youtube videos, it only supports files that are either MP4, WebM and Ogg. W3C Schools

Youtube already provides you with an "embed" function on their page which auto generates the iFrame for you. Youtube Embed There are a few other methods but they are no longer used (deprecated). Youtube API

As for the issue with IE, maybe have a look at this similar question: YouTube iframe embed code not working in IE

The only way around the issue if you want to use the HTML5 video tag is to download the Youtube video in one of the specified formats.

0
votes

You need to use the <iframe> tag to embed the YouTube. Please read the code below:

<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>