使用AngularJS表达式嵌入YouTube视频无法显示的问题

看起来你遇到的问题很典型——测试链接能正常显示正确的URL，但iframe就是加载不出视频。我来帮你分析下原因和解决办法：

核心问题：直接插值src属性的局限性 #

当你直接在iframe的src里写{{video}}时，浏览器会在Angular完成数据绑定之前就尝试加载这个URL。也就是说，浏览器会先请求https://www.youtube.com/embed/{{video}}?rel=0这个无效地址，即使之后Angular把{{video}}替换成了真实的视频ID，很多浏览器也不会重新发起正确的请求，导致视频加载失败。

而你看到的测试链接能正常显示，是因为普通文本的插值是Angular优先处理的，不会有浏览器提前加载的问题。

解决方案：改用Angular的ng-src指令 #

把iframe的src替换成ng-src，这是Angular专门为动态资源URL设计的指令，它会等待插值表达式计算完成后，再设置真实的src属性，确保浏览器加载的是正确的地址。

修改后的代码如下：

<div class="small-12 medium-6 large-4 columns" ng-if="video">
  Testing video link: https://www.youtube.com/embed/{{video}}
  <div class="h_iframe">
    <iframe width="854" height="480" ng-src="https://www.youtube.com/embed/{{video}}?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

额外排查点 #

如果改完ng-src还是不行，可以检查这两点：

• 确认video变量的值是纯YouTube视频ID（比如dQw4w9WgXcQ），不是完整的视频URL或者带多余参数的字符串
• 打开浏览器控制台（F12），看看有没有报错信息，比如是否有CORS相关的提示（不过YouTube的embed服务一般不会有这个问题）

内容的提问来源于stack exchange，提问作者Emenpy