I am trying to play youtube video in my window 8.1 app, with the following code.
var videoPlayer = document.getElementById("videoPlayer");
var content = '<iframe width="480" height="270" src="http://www.youtube.com/embed/XGSy3_Czz8k?rel=0" frameborder="0" allowfullscreen></iframe>';
WinJS.Utilities.setInnerHTMLUnsafe(videoPlayer, content);
where the videoplayer is name of div where video player appears, but I am not able to play the video.
I have also tried using sample code from
https://developers.google.com/youtube/iframe_api_reference#Examples
but it didn't work as well. So please can anyone help me with this.
Thanks in advance
I managed to get this scenario to work for me, but I had to jump through some hoops to make it work.
First, in order to load the external script they need to communicate with the iframe, I had to sandbox the player in its own outer iframe that could run in the web context:
<div class="playerContainer">
<iframe class="playerFrame" src="ms-appx-web:///pages/video/iframe.html" style="visibility: hidden" scrolling="no"></iframe>
</div>
Then I had to edit my APPXMANIFEST to include the YouTube domain as a ContentURI rule:
https://*.youtube.com
My iframe.html was pretty simple:
<!DOCTYPE html>
<html>
<head>
<title>Video Player Iframe</title>
<link href="/pages/video/iframe.css" rel="stylesheet" />
<script src="/pages/video/iframe.js"></script>
</head>
<body>
<iframe id="player"
src="https://www.youtube.com/embed/?enablejsapi=1"
frameborder="0"
style="visibility: hidden"></iframe>
</body>
</html>
Then inside of iframe.js I borrowed heavily from https://developers.google.com/youtube/iframe_api_reference#Examples
(function () {
"use strict";
window.addEventListener('message', function (e) {
if (e.data.op === 'load') {
loadVideo(e.data.args)
} else if (e.data.op === 'resize') {
resize(e.data.args);
} else if (e.data.op === 'destroy') {
destroy();
}
});
var player;
var videoId;
function loadVideo(args) {
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 playerEl = document.getElementById('player');
playerEl.height = window.innerHeight;
playerEl.width = window.innerWidth;
videoId = args.videoId;
window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
playerEl.style.visibility = 'visible';
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady
}
});
}
}
function resize(args) {
player && player.setSize(window.innerWidth, window.innerHeight);
}
function destroy() {
player && player.destroy();
player = null;
}
function onPlayerReady(event) {
event.target.loadVideoById(videoId);
}
})();
As you can see from the above, I am using iframe's postMessage to tell the wrapping iframe to load the videoId that I want:
iframe.addEventListener("load", function () {
iframe.style.visibility = 'visible';
if (iframe.contentWindow) {
iframe.contentWindow.postMessage({ op: "load", args: { videoId: video.id} }, "*");
}
});
Hope that helps some. The YouTube IFrame API is pretty finicky and didn't work right for me when loaded any other way.
Related
I'm trying to stop emebed youtube video when another one is played on the same page, I found this:
stackoverflow
fiddle-example
But when i try to use it on my web page it doesn't work:
my_test
SCRIPT
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var $ = jQuery;
var players = [];
$('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
if (!this.id) { this.id='embeddedvideoiframe' + k }
players.push(new YT.Player(this.id, {
events: {
'onStateChange': function(event) {
if (event.data == YT.PlayerState.PLAYING) {
$.each(players, function(k, v) {
if (this.getIframe().id != event.target.getIframe().id) {
this.pauseVideo();
}
});
}
}
}
}))
});
}
</script>
HTML
One:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed /zXV8GMSc5Vg?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"> </iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"> </iframe>
What's wrong? I've created the project on google developers, i've created the API key but i don't know where i must put that.
You forgot to add the jquery lib ( https://code.jquery.com/ )
SOLVED
The problem was that in the example they used the "origin" parameter, this parameter if setted avoids the introduction into the page of malicious third-party JavaScript code, which can take control of the YouTube player.
src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"
This is why the code work on the fiddle page but not on mine.
So i've changed this origin path with my complete URL of the host page and now it work!
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'd like to create a website that allows users to upload video to a YouTube channel and also embeds those YouTube videos into my website. Is this possible using YouTube's API? How would I go about learning how to do this? I am familiar with HTML5/CSS3 and Python and am acquainted with Java and JavaScript. Any advice is very appreciated.
Did you try ?
YouTube API
YouTube API has python API that allow you to use YouTube at your site
Below is sample page using JavaScript to invoke the YouTube Player to play video embedded in a web page. The sample shows how to play just one video and how to queue several videos and then play them. The sample plays a default video automatically when the page is loaded. When a video is finished playing, the default video is played.
<!doctype html>
<html lang="en">
<head>
<title>Play YouTube Videos</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
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;
var videosQueuedCount;
function onYouTubePlayerAPIReady() {
videosQueuedCount = 1;
var vars = {
autoplay: 1,
enablejsapi: 1,
controls: 1
}
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars: vars,
videoId:'HL6ZL9q3UJ8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
}
function playVideo(VID) {
window.top.scrollTo(0,200);
videosQueuedCount = 1;
player.loadVideoById(VID);
}
function queueVideo(queuedCount,VID) {
window.top.scrollTo(0,200);
videosQueuedCount = queuedCount;
player.loadPlaylist(VID);
player.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
videosQueuedCount -= 1;
if (videosQueuedCount < 1) {
videosQueuedCount = 1;
playVideo('HL6ZL9q3UJ8');
}
}
}
</script>
<div id="ytplayer"></div>
<p><b>10/22/2015</b> East Lyme, CT Issues and Answers (28:26)<br>
Information<br>Teri Smith of Smith's Acres and Niantic Main Street<br>
</p>
<p><b>10/21/2015 East Lyme, CT Board of Selectmen Meeting</b><br>
Regular Meeting<br>
Part 1 (28:50)
Part 2 (29:25)
Part 3 (29:17)
Part 4 (01:53)
All
</p>
</body>
</html>
I hope this helps!
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>