It seems that when I try to use www.youtube-nocookie.com url , api doesnt seem to work anymore . Here is the fiddle: https://jsfiddle.net/m2wrujy7/1/
If you remove host parameter then it works.
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
host:'//www.youtube-nocookie.com/',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
<div id="player"></div>
Related
I have the video playing correctly, and there are several answers to my question on here but I can't for the life of me figure out where to append any of the solutions into my working code below
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '700',
width: '1600',
videoId: 'MyVideo',
playerVars: { 'autoplay': 1, 'controls': 0,'modestbranding': 1, 'rel': 0 }
});
}
</script>
Certainly would appreciate any help!
You can use the players onStateChange event to call a function of your own.
For Example
function VideoEnd(state){
if(state.data === 0){
window.location="https://jsfiddle.net";
}
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '300',
width: '400',
videoId: 'kvKLpJbIfn4',
playerVars: { 'autoplay': 1, 'controls': 0,'modestbranding': 1, 'rel': 0 },
events:{
'onStateChange': VideoEnd
}
});
}
Here is a JsFiddle Example
If you have any questions please leave a comment below and I well get back to you as soon as possible.
I hope this helps. Happy coding!
So for some time now I am trying to make a proper shuffle script, using the youtube api, in order to play my youtube playlist.
I've found a lot of examples, but none of them seem to be working very well. Some do shuffle the list but not the first song being played, and some do the precise opposite.
What I would like is to shuffle the full playlist and then start playing. So the first played song should be random and the next one played should be random/shuffled as well.
Ive found the script below to shuffle the playlist. However the first song played is not shuffled. Can someone help me out with this?
Thanks a million!
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
var player = new YT.Player("player", {
height: '390',
width: '640',
events: {
'onReady': function (event) {
event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
</script>
</body>
</html>
This worked for me!
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
var numPl = Math.floor((Math.random() * 50) + 1);
var player = new YT.Player("player", {
height: '390',
width: '640',
playerVars: {
listType:'playlist',
list:'PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT',
index: numPl,
autoplay: 1,
},
events: {
'onReady': function (event) {
//event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
//event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
</script>
</body>
</html>
This works using youtube api. and users youtube created play list . shuffles the play list into new order every time page is refreshes
Load YT-player API.
Load YT-playlist user playlist id "**.youtube.com/playlist?list=PLo16_*******"
To Shuffle playlist use > player.setShuffle(true);
To Start YT-player at video 1 in shuffled playlist use > player.playVideoAt(0)
working demo Responsive shuffled YouTube Playlist on Google sites
code jsfiddle.net
<!DOCTYPE html>
<html>
<!-- Responsive YouTube shuffled playlist player -->
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag.
style = replaces size in the player script makes it responsive -->
<div style=" top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
id='player'>
</div>
</body>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
autoplay: 0,
loop: 1,
controls: 1,
showinfo: 1,
frameborder: 1,
'listType': 'playlist',
'list': "PLo16_DLriHp4A8BvkJFZfO_4KDVv7yGgy", // your YouTube playlist id here
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// first shuffle play list
player.setShuffle(true);
// Onload and on refresh shuffles the users YT playlist but always starts playing
// the first video in the original list at its new index position
//ie. video (1) = video( new shuffled pos ?)
// to get over this we can start the player at the new shuffled playlist
//video 1(index=0) this changes every time it's refreshed
player.playVideoAt(0)
}
// 5. The API calls this function when the player's state changes.
// option to to add bits
function onPlayerStateChange(event) {
const player = event.target;
}
</script>
</html>
I am using IFrame for playing youtube video. It works fine but I want to stop it on button click. How to do it. Please help.
<div class="padding-css">
<iframe ng-model="myframe" class="frameclass" src="https://www.youtube.com/embed/CR5zjazP3hg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Solution for Ionic2
ionViewWillLeave() {
let listaFrames = document.getElementsByTagName("iframe");
for (var index = 0; index < listaFrames.length; index++) {
let iframe = listaFrames[index].contentWindow;
iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
}
Don't forget to enable JS at the end of the video link *?enablejsapi=1
You can create iframe through java script and control player through buttons as stop.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
For more details you can go through this link.
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
I want to Embed A youtube video by url, example= https://gdata.youtube.com/feeds/api/users/estXcrew/uploads?max-results=1
This Is the block of code that I used
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: '//video ID Usually goes here',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
I Copied this code from the Site of the Youtube API since I don't have much experience with it yet. How do I replace the "videoId" Line with the link above?
To load a YouTube video replace
//video ID Usually goes here
with the ID of the video you want to load.
Example YouTube video: http://www.youtube.com/watch?v=xmP7kQdAPhM
Now in the videoId I would use
videoId: 'xmP7kQdAPhM'
Or if you used some PHP you could try something like the following.
<?php
$feedURL = 'http://gdata.youtube.com/feeds/api/users/estXcrew/uploads?max-results=1';
$sxml = simplexml_load_file($feedURL);
$i=0;
foreach ($sxml->entry as $entry) {
$media = $entry->children('media', true);
$watch = (string)$media->group->player->attributes()->url;
$pat = '/\=([^\"]*?)\&/';
$value=$watch ;
preg_match($pat, $value, $matches);
echo "<iframe title='YouTube video player' class='youtube-player' type='text/html'
width='640' height='390' src='http://www.youtube.com/embed/$matches[1]'
frameborder='0' allowFullScreen></iframe>";
?>
<div class="videoitem">
<div class="videotitle">
<h3><?php echo $media->group->title; ?></h3>
<p><?php echo $media->group->description; ?></p>
</div>
</div>
<?php $i++; if($i==3) { echo '<div class="clear small_v_margin"></div>'; $i=0; } } ?>
Example
First, about the url. Note that this url means using version 2 and that this version has been deprecated. See "YouTube API Subject to the Deprecation Policy": https://developers.google.com/youtube/youtube-api-list
Note also, that by default version 1 is used and you may want to add: v=2, for version 2. If you prefer the response in JSON instead of XML, then add: alt=json. For better reading add: prettyprint=true.
For example:
https://gdata.youtube.com/feeds/api/users/estXcrew/uploads?maxresults=1&v=2&alt=json&prettyprint=true
Further, since JSON is used in api version 3, you may prefer JSON to be used. For using api version 3 it is necessary to obtain an api-key first, by registering.
To capture the response, you need to send the url to the server using XMLHttpRequest() or ActiveXObject().
Look for (JS or other type) code libraries that may help you, for example to parse and compose XML or JSON strings; or send url requests.
See for jSON parsing: Parse JSON in JavaScript?
About your code supplied: use parameters. For example, after getting a videoId:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
// Adding a library to send requests to a server ?
</script>
-->
<script>
var myVideoId = "ZY7aRxb-Z1c"; // Set the videoId here.
// insert an iframe
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player; // reference to the player object
var param = { // video-player parameters
height: '200',
width: '200',
videoId: 'xxxxxxxxxxx',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
};
param.videoId = myVideoId // Replace the videoId parameter
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', param); // create the player object
}
function onPlayerReady(event) {
event.target.playVideo(); // start to play
}
var done = false; // flag
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000); // This will stop playing after 6 seconds
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</head>
<body>
<div id="player">please wait...</div>
</body>
</html>
I do have following code where i want to play youtube video when button is clicked.
I have iframe code for youtube.
<script>
var player = document.getElementById("myplayer");
//Create a simple function and check if player exists
function play() {
if(player) {
player.playVideo();
}
}
</script>
<iframe id="myplayer" width="500" height="500" src="http://www.youtube-nocookie.com/embed/C-VoyCDUvr0?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
Play Youtube Video
But it does not play when i click on button / link
I put script code in head part of html and iframe and anchor link in body part of html.
Am i missing anything?
Here I gave the example of two players:
<!DOCTYPE html>
<html>
<body>
<div id="divPlayer1"></div>
<div id="divPlayer2"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('divPlayer1', {
height: '390',
width: '640',
videoId: 'iZYIsJ9i5yE',});
player2 = new YT.Player('divPlayer2', {
height: '390',
width: '640',
videoId: 'J7rKAKipj8s',});
}
function play1() {
player1.playVideo();
}
function play2() {
player2.playVideo();
}
</script>
Play Youtube Video1
Play Youtube Video2
</body>
</html>
There probably is no iframe#myplayer yet when your script is run. Move the definition of player inside the function like this:
function play() {
var player = document.getElementById("myplayer"); // Moved here
if(player) {
player.playVideo();
}
}
That should work.
Edit: That latter link seems to suggest you do this instead:
var player; // Might not be necessary
function onYouTubePlayerReady(playerId) {
player = document.getElementById("myplayer");
}
function play() {
if(player) {
player.playVideo();
}
}
<script>
function toggleVideo(state) {
var iframe = document.getElementById("myplayer").contentWindow;
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<!-- popup and contents -->
<iframe id="myplayer" width="500" height="315" src="http://www.youtube.com/embed/C-VoyCDUvr0?enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
Play Youtube Video
This is the working code with one play. Should be altered only by videoId: 'iZYIsJ9i5yE' whity our videoId in youtube:
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'iZYIsJ9i5yE',});
}
function play1() {
player1.playVideo();
}
</script>
Play Youtube Video
</body>
</html>
Use this iframe and change your youtube link. I hope it will work surely. It is working on my website.
<iframe src="https://www.youtube.com/embed/2XXzYCfBiAg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen style="width:100%; height:445px; padding:0; left:25%"></iframe>