CODEWITHSUNDEEP
youtubeyoutube-apiyoutube-javascript-apiyoutube-iframe-api
Ernesto Lacalle
Ernesto Lacalle

Reputation: 1

When i insert a iframe youtube video doesn't work

I try to insert a youtube video through the Youtube iframe API, but now doesn't work appear "An error occurred Please try again later".

here is my code:

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

Upvotes: 0

Views: 1923

Answers (3)

ruh_hastasi77
ruh_hastasi77

Reputation: 1

Take the option of "share" -> "embeded" and copy the code

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

Upvotes: 0

ReyAnthonyRenacia
ReyAnthonyRenacia

Reputation: 17613

Try this straightforward approach I got from 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>

Give that a run and you'll have a Youtube inside an iframe in no time. How you expand the program is up to you.

Upvotes: 1

BitDEVil2K16
BitDEVil2K16

Reputation: 324

This Works for me,

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

Or You can use this,

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

good luck

Upvotes: 0

Related Questions