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

时间:2016-12-07 10:08:12

标签: youtube youtube-api youtube-javascript-api youtube-iframe-api

我尝试通过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>

3 个答案:

答案 0 :(得分: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。您如何扩展该计划取决于您。

答案 1 :(得分:0)

这对我有用,

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

或者你可以使用它,

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

祝你好运

答案 2 :(得分:0)

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

       <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>
相关问题