I have a page that has multiple youtube videos. I want the video to play when someone clicks on the link that corresponds to each video.
For Example: When someone clicks on the video 2 link, video 2 plays.
HTML
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"></iframe>
Video 1
<br><hr>
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
frameborder="0"></iframe>
Video 2
JQUERY
var ytplayer;
function onYouTubeIframeAPIReady() {
ytplayer = new YT.Player('ytplayer', {
});
}
$(document).ready(function () {
$("#start").click(function () {
ytplayer.playVideo();
});
});
HERE IS MY JSFIDDLE Only clicking on video 1 works.
Here is a demo that works as you expected.
I have removed the second script tag and modified the ids of the second iframe and a tags.
var ytplayer, ytplayer2;
function onYouTubeIframeAPIReady() {
ytplayer = new YT.Player('ytplayer', {});
ytplayer2 = new YT.Player('ytplayer2', {});
}
$(document).ready(function () {
$("#start").click(function () {
ytplayer.playVideo();
return false;
});
$("#start2").click(function () {
ytplayer2.playVideo();
return false;
});
});
The html part:
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"></iframe>
Video 1
<br><hr>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
frameborder="0"></iframe>
Video 2
Hope this helps.
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'm developing a simple web application with jQueryMobile, I can swipe between different pages with Youtube videos,
the problem I have is quite simple, I want to stop a youtube video whine I swipe go to the next page,
otherwise the user will have two youtube videos playing in the same time.
here is the Code and the demo :
JSFiddle DEMO + FULL CODE
Here is my awesome full code :
var i =1;
$("body").on("swipeleft",function(){
if (i<2) {
i++;
$.mobile.changePage('#p'+i, {
transition: "slide"
});
}
});
$("body").on("swiperight",function(){
if (i>1) {
i--;
$.mobile.changePage('#p'+i, {
transition: "slide",
reverse: true
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div data-role="page" id="p1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/X9_n8jakvWU" frameborder="0" allowfullscreen></iframe>
</div>
<div data-role="page" id="p2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/UecPqm2Dbes" frameborder="0" allowfullscreen></iframe>
</div>
Given the older version of jQuery you are using, I assume you are using jQuery Mobile 1.3 not 1.4.
You could use the pagebeforehide event to get the iframe of the page you are leaving and then quickly set the src of the iframe to nothing and then back to the video url. This will stop the video from playing.
var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) {
TheFrame = $(event.target).find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
The setTimeout allows the slide transition to complete before messing with the iframe src.
Working DEMO
If you are using jQM 1.4, you can use the pagecontainer widget events instead:
var TheFrame;
$(document).on( "pagecontainerbeforehide", function( event, ui ) {
TheFrame = ui.prevPage.find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
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.
Context
I have a page which contains a bunch of links to jQuery UI Dialog boxes which then have video.js players within them.
Problem
When you click one of these links the first time, everything works perfectly.
It's when you click subsequent times that you run into issues. I've fixed the issue with opening up a second different video by making all of the ids unique.
However, it seems this doesn't help opening the same video a second time; so I even made those player's ids unique (see below the id propery for <video> containing both the hash of the video as well as a rand.
Defined Issue
What I see is happening is that once you close the dialog box the browser is continuing to download the video source. This means that subsequent dialog openings create more videos downloading and so on.
Questions
How can I stop the video from downloading?
Is there a better way of re-initiliazing than what I'm doing.
Is there a better way of killing off the videos when someone hits the close button?
Code
The jQuery UI Dialog window is loaded with the following HTML
<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
controls="controls" preload="auto" data-setup="{}"
poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
<source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
<param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
Javascript For the Dialog Box
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog( "destroy" );
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js').remove();
}
});
});
return false;
}
I don't know if this is the correct answer to solve this; however, I ended up changing my javascript to look like the following.
The secret was setting src="" to get the browser to stop buffering. This throws a video error on the console which I really don't like; but for now it works.
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js video').attr('src', '');
$('.video-js').remove();
}
});
});
return false;
}
I have many videos in a given page and I was facing the same issue. But the below approach worked well for me.
NOTE: Change the MYID for each video in the page.
jQuery(document).ready(function(){
jQuery("a#videolink").fancybox({
frameWidth: 800,
frameHeight: 450,
overlayShow: true,
overlayOpacity: 0.7
});
});
<a id="videolink" href="#MYID" title="Test Video">
<img src="mp4test.jpg" width="248" height="145" />
</a>
<div style="display:none">
<video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="300" data-setup="{}" >
<source src="mp4test.mp4" type='video/mp4'>
</video>
</div>
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>