当我插入 iframe youtube 视频时不起作用答案

【问题标题】：When i insert a iframe youtube video doesn't work当我插入 iframe youtube 视频时不起作用
【发布时间】：2016-12-07 10:08:11
【问题描述】：

我尝试通过 Youtube iframe API 插入 youtube 视频，但现在无法正常工作，出现“发生错误，请稍后重试”。

这是我的代码：

<html>
  <head>
    <title>test</title>
        <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
    </head>
  <body>
    <div id="youtube"></div>
    <script>
      var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('youtube', {
                videoid: 'UqyT8IEBkvY',
                height: '360',
                width: '640',
                events: {
                    'onReady': onPlayerReady
                }
            });
        }

        function onPlayerReady() {
            console.log("test");
            player.playVideo();
            player.mute();
        }
      </script>
    </body>
  </html>

【问题讨论】：

标签： youtube youtube-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

试试我从HTML YouTube Videos 得到的这种简单的方法：

<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body> 
<iframe width="420" height="315"
src="https://www.youtube.com/embed/t2ByLmLnYJ8">
</iframe>

<script src="https://apis.google.com/js/client.js"> </script>
</body>
</html>

试一试，您很快就会在 iframe 中拥有一个 Youtube。如何扩展程序取决于您。

【讨论】：

【解决方案2】：

这对我有用，

<div id="ytplayer"></div>

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '360',
        width: '640',
        videoId: 'UqyT8IEBkvY',
        events: {
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady() {
    console.log("test");
    player.playVideo();
    player.mute();
}
</script>

或者你可以使用这个，

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
<script>
    var app = angular.module('app', ['youtube-embed']);
    app.controller('ctrl', function ($scope) {
        $scope.player = null;
        $scope.$on('youtube.player.playing', function () {
            console.log('playing!!!')
        })
    });

</script>
<script src="//brandly.github.io/angular-youtube-embed/angular-youtube-embed.js"></script>
</head>

<body ng-controller="ctrl">
<youtube-video video-id="'UqyT8IEBkvY'" player="player"></youtube-video>
</body>

</html>

祝你好运

【讨论】：

【解决方案3】：

选择“分享”->“嵌入”并复制代码

       <div align="center">
    <div style="display:inline" align="left">
        <iframe style="display:inline" width="560" height="315" src="https://www.youtube.com/embed/ISNZYcpoyoM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>    
    <div style="display:inline" align="center">
        <iframe style="display:inline" width="560" height="315" width="560" height="315" src="https://www.youtube.com/embed/10_MkXNMpVw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
    </div>
    <div style="display:inline" align="right">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/2Z0nt-pwIlA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </div>

【讨论】：