CODEWITHSUNDEEP
asp.net-mvcangularjsvideoyoutube
Sampath
Sampath

Reputation: 65978

Embedded YouTube video is not working on asp.net MVC/Angular app

I have tried to embed the video as shown below on my asp.net mvc app.

<div class="col-lg-12 center " data-animation="bounceInRight" data-delay="300">
     <iframe width="170" height="128" ng-src="https://www.youtube.com/embed/watch?v=1aDLYFBuWc8" frameborder="0" allowfullscreen style="max-width:100%; margin:0 auto; display:block;"></iframe>
</div>

But when I tried to play, it shows below error.

enter image description here

There is no console window errors.When I tried to get the url by right clicking the above video then it shows this : https://youtu.be/undefined

But when I embeded below kind of url then it works fine.

https://www.youtube.com/embed/A6XUVjK9W4o

Could you tell me how to sort out this issue ? Thanks in advance.

Answer : I think I can avoid this issue if I use the Video_Id as @Jossef Harush mentioned below.

Upvotes: 1

Views: 2094

Answers (3)

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34257

Using ng-src in redundant

Since you don't dynamically set the video url in your example. no need to use ng-src

YouTube Embed URL is incorrect

from they're docs:

Embed a player using an tag

Define an tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The tag's height and width parameters specify the dimensions of the player.

If you create the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

http://www.youtube.com/embed/VIDEO_ID

use https://www.youtube.com/embed/A6XUVjK9W4o instead of https://www.youtube.com/embed/watch?v=1aDLYFBuWc8

Sample on Plunker

Upvotes: 2

michelem
michelem

Reputation: 14590

Bad url and you can't use ng-src try this:

<div class="col-lg-12 center " data-animation="bounceInRight" data-delay="300">
     <iframe width="170" height="128" src="https://www.youtube.com/embed/1aDLYFBuWc8?rel=0" frameborder="0" allowfullscreen="" style="max-width:100%; margin:0 auto; display:block;"></iframe>
</div>

http://jsfiddle.net/6w3ao4ft/

Upvotes: 0

Glanz Gurke
Glanz Gurke

Reputation: 81

go to the wanted Youtube video and click on Share then you will get the option for a code snippet which you can embed into your code.

This is the default from yt

<iframe width="420" height="315" src="Link here" frameborder="0" allowfullscreen></iframe>

Upvotes: 0

Related Questions