1

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.

Sampath
  • 63,341
  • 64
  • 307
  • 441

3 Answers3

2

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

Sampath
  • 63,341
  • 64
  • 307
  • 441
Jossef Harush Kadouri
  • 32,361
  • 10
  • 130
  • 129
  • Actually this is just a sample.I need to add the series of videos into app's video gallery.So could you tell me how to get the video_id when user enters different types of you tube video's urls (`JavaScript`)? – Sampath Jun 19 '15 at 08:49
  • 1
    @Sampath, iv'e made an example - http://plnkr.co/edit/OIpWJurtjTD6DKuoGHyx?p=preview simply copy & paste the url and click add – Jossef Harush Kadouri Jun 19 '15 at 09:12
  • Exactly what I need.Thanks a lot my friend :) – Sampath Jun 19 '15 at 10:49
0

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>
Glanz Gurke
  • 81
  • 2
  • 14
0

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/

michelem
  • 14,430
  • 5
  • 50
  • 66