嵌入式 YouTube 视频不适用于 asp.net MVC/Angular 应用程序

Question

我已尝试在我的 asp.net mvc 应用程序中嵌入如下所示的视频。

<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>

但是当我尝试播放时，它显示以下错误。

没有console window 错误。当我试图通过右键单击上面的视频来获取网址时，它会显示：https://youtu.be/undefined

但是当我嵌入下面的网址时，它就可以正常工作了。

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

你能告诉我如何解决这个问题吗？提前致谢。

答案： 我想如果我使用Video_Id 作为下面提到的@Jossef Harush，我可以避免这个问题。

Answer 1

在冗余中使用ng-src

由于您没有在示例中动态设置视频网址。无需使用ng-src

• ng-src - http://plnkr.co/edit/HfJRVtt1Qga5UgyU242u?p=preview
• src - http://plnkr.co/edit/LROnn8jHak1P8Hk4bR7e?p=preview

YouTube 嵌入网址不正确

他们是docs：

使用标签嵌入播放器

在你的应用程序中定义一个标签，其中 src URL 指定播放器将加载的内容以及任何其他内容 您要设置的播放器参数。标签的高度和宽度 参数指定播放器的尺寸。

如果您自己创建元素（而不是使用 IFrame Player API 来创建它），您可以附加播放器参数 直接到 URL 的末尾。 URL 的格式如下：

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

使用https://www.youtube.com/embed/A6XUVjK9W4o 代替https://www.youtube.com/embed/watch?v=1aDLYFBuWc8

Sample on Plunker

Answer 2

转到想要的 Youtube 视频并点击分享，然后您将获得一个代码 sn-p 选项，您可以将其嵌入到您的代码中。

这是 yt 的默认设置

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

Answer 3

错误的 url，你不能使用 ng-src 试试这个：

<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/