CODEWITHSUNDEEP
javascripthtmlvue.jsvideoyoutube
Aadil Hafesji
Aadil Hafesji

Reputation: 397

HTML youtube video link not showing video but downloads file

I am trying to load a video on my HTML page by using this code:

<video v-for="(data, key) in projectData.videos" :key="key" width="320" height="240" controls>
     <source :src="data.url">
</video>

An example of a source that I am using is: http://www.youtube.com/v/qUfzflYqQeE

The url that I am getting is from an API.

But, the issue is that when the page is loaded and the video tags are shown, it is only blank and with the source that I have pasted above it tries to download a file.

However, I don't want this to happen, I just want to load video and let it play.

If someone can please help.

Many thanks.

Upvotes: 0

Views: 1138

Answers (1)

Quentin
Quentin

Reputation: 944205

If you want to use a <video> element to play a video, then the URL you give it must point to a video file. The URL you have does not. It leads to an HTML document.

If you want to embed YouTube videos, then use the YouTube embed code (which uses an iframe and the YouTube player along with YouTube adverts). YouTube isn't in the business of hosting plain video files for display on other sites without YouTube getting analytic data and being able to show adverts.

Upvotes: 2

Related Questions