I'm a french designer (so, sorry for my english mistakes) and I'm trying to create an interactive video with different videos hosted on youtube.
These videos already use the youtube 'annotations' or 'cards', but I want to hide them to create my own solution.
Basically I just want to show two divs at a certain timecode of the video to allow user to click on one of them to go to a new url. This thing works.
My question is simple : how can I hide the existing annotations?
I've tried with css, but it doesn't seem to work…
I'm not a full-time developer, so if you know a simple solution, I would be happy to know it :)
Here is the code
<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: '360',
width: '640',
videoId: 'mVwQFmKc7mA',
playerVars: { 'autoplay': 1, 'controls': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 3 },
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(displayNewDivs, 2000);*/
done = true;
}
}
function displayNewDivs() {
// HERE THE CODE TO SHOW NEW DIVS
}
</script>
Thank you very much!
Related
I need to make a youtube video as a background for a specific section not the whole page.
So I need for section to be 390px height and 100% width.
Right now I am using this code but the problem is that the youtube iframe is 100% full width but the video itself is very small and with black sidebars.
here is the code:
<div class="video-wrapper">
<div id="player"></div>
</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: '100%',
videoId: 'EhArkyWXpO0',
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>
I am using youtube API and Im setting 100% width in javascript.
I am pretty sure I have to use css to achieve this, but no success so far...
Here is the current output
My desired output would be the wideo without black sidebars
Thanks!
You need to adjust the width with javascript by settings width to the width of your window or the parent node.
Set the size of the parent node to 100% and try something like:
node = document.getElementById("player");
player = new YT.Player('player', {
height: node.parentNode.offsetWidth * 9 / 16,
width: node.parentNode.offsetWidth,
videoId: 'EhArkyWXpO0',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
)
If you want to adjust the size if the window is resized, you have to add a function to window.onresize:
window.onresize = function() {
var node = document.getElementById('player');
// fetch player; may a childnode of node[id="player"]
player.setAttribute("width", node.parentNode.offsetWidth);
};
I have a slideshow with youtube video's. But the problem now is that I can't trigger the onPlayerStateChange.
This is my code:
echo '<iframe id="youtube" src="http://www.youtube.com/embed/kOkQ4T5WO9E?enablejsapi=1&autoplay=1&rel=0</iframe>';
This is the JavaScript:
<script src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('youtube', {
events: { 'onStateChange': onPlayerStateChange }
});
}
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerStateChange(event) {
if (event.data === 0) {
alert('Video finished, next slide');
slide.next();
}
}
</script>
Is there a way to reload the iframe api when the video has ended?
I apologize, as last I knew, the YouTube API was entirely deprecated and almost no longer supported.
You're going to need to load new videos with the loadVideoByUrl function
player.loadVideoByUrl(mediaContentUrl:String,
startSeconds:Number,
suggestedQuality:String):Void
Also, you should change event.data === 0 to event.data == YT.PlayerState.ENDED
onReady event are not being fired on IE11 & Edge, but it's working fine on IE10, Firefox, Safari and Google Chrome.
I'm using the javascript api to mute a video when the page is loaded.
This is the code i wrote. (Note. I'm using Drupal)
(function ($) {
function onPlayerReady(event) {
event.target.mute();
}
function muteVideos(video_ids) {
for (var iframe_id in video_ids) {
var player = new YT.Player(iframe_id, {
videoId: iframe_id,
playerVars:
{
"enablejsapi":1,
"origin":document.domain,
"rel":0
},
events: {
"onReady": onPlayerReady
}
});
}
}
function loadPlayer(video_ids) {
if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubePlayerAPIReady = function () {
muteVideos(video_ids);
};
} else {
muteVideos(video_ids);
}
}
Drupal.behaviors.eweev_media_youtube_video = {
attach: function (context, settings) {
// Array containing iframe ids of the youtube videos that should be
// muted provided using drupal_add_js
var video_ids = Drupal.settings.eweev_media_youtube_video;
loadPlayer(video_ids);
}
};
})(jQuery);
I wanna know if i'm missing something.
I did some research and found out that there is a temporary issue with the IFrame API.
For temporary fix, you may view the related Stack overflow below:
YouTube iframe player API - OnStateChange not firing and Youtube Iframe API not working in Internet Explorer (11)
I have multiple YouTube iFrames embedded on a page. If one of the movies is already playing, and a user then decides to start playing a different movie, is it possible to stop playing the first movie so there is only ever one playing at a time?
I have looked at the 'YouTube Player API Reference for iframe Embeds' https://developers.google.com/youtube/iframe_api_reference but if i'm honest I just don't understand it. My developer skills are very limited.... clearly.
Pitiful I know, but this is all I have at the moment (just the iFrames)... http://jsfiddle.net/YGMUJ/
<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
I thought all I needed to do was add '&enablejsapi=1' at the end of the video URLs.
Any help would be much appreciated.
Thank you in advance.
Here is an advanced version of #Matt Koskela's version. It does not require you to create the videos by JavaScript. It works for example if the videos are generated on the PHP side (think Wordpress).
JsFiddle demo here.
<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>
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>
Edit: Check out Jennie Sadler's fine-tuned version below if your videos start as thumbnails.
Instead of using iframes, you actually want to use the iFrame Player API. Depending on how many videos you actually wanted to embed, you might want to make this javascript more dynamic, but this working example should give you enough to get started.
Basically what I'm doing here is initializing the two players, and pausing the opposite video when a player state changes to play.
You can play with the following code at http://jsfiddle.net/mattkoskela/Whxjx/
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '293',
width: '520',
videoId: 'zXV8GMSc5Vg',
events: {
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '293',
width: '520',
videoId: 'LTy0TzA_4DQ',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
stopVideo(event.target.a.id);
}
}
function stopVideo(player_id) {
if (player_id == "player1") {
player2.stopVideo();
} else if (player_id == "player2") {
player1.stopVideo();
}
}
vbence's solution is really close, but there's one edit I would suggest. You should check that the other players are playing before you pause them, otherwise, playing the first embed on the page will play/pause every other embed on the page, removing the preview thumbnail and creating startling side-effects.
<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.getPlayerState() == YT.PlayerState.PLAYING # checks for only players that are playing
&& this.getIframe().id != event.target.getIframe().id) {
this.pauseVideo();
}
});
}
}
}
}))
});
}
</script>
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>
The above script of vbence works perfectly.
Here is the same script in javascript.
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 i,
frames,
players = [];
frames = document.getElementsByTagName("iframe");
const arr = Array.from(frames);
const arrnew = arr.filter((e) => {
return e.src.indexOf("https://www.youtube.com/") == 0;
});
arrnew.forEach((ele, index) => {
if (!ele.id) {
ele.id = "embeddedvideoiframe" + index;
}
players.push(
new YT.Player(ele.id, {
events: {
onStateChange: (event) => {
if (event.data == YT.PlayerState.PLAYING) {
players.forEach((ply) => {
if (ply.getIframe().id != event.target.getIframe().id) {
ply.pauseVideo();
}
});
}
},
},
})
);
});
}
I'm super new to this. I am posting this to see if this is fine.
Also I do not know jQuery so this was just a simpler way for me.
I also only have one iframe and change src. Is this a problem???
I put an id on an iframe to populate it with an array of videos.
I ran into a problem where it would keep playing it after I closed a modal box.
After looking for answers I decided to try making the iframe reference nothing.
It works but probably is not the best solution if you want both videos on screen.
function stopVid(){
var iframe = document.getElementById("videoPlayer");
iframe.src = "";
}
Vanilla JS based on answer by Jennie Sadler.
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 players = [];
Array.prototype.slice.call(document.getElementsByTagName("iframe")).filter(function(e) {
return e.src.indexOf("https://www.youtube.com/") == 0;
}).forEach(function(youtubevideo, k, v) {
if (!youtubevideo.id) {
youtubevideo.id = 'embeddedvideoiframe' + k;
}
players.push(new YT.Player(youtubevideo.id, {
events: {
'onStateChange': function(event) {
if (event.data == YT.PlayerState.PLAYING) {
Array.prototype.slice.call(players).forEach(function(youtubevideo, k, v) {
if (youtubevideo.getPlayerState() == YT.PlayerState.PLAYING //# checks for only players that are playing
&& youtubevideo.getIframe().id != event.target.getIframe().id) {
youtubevideo.pauseVideo();
}
});
}
}
}
}))
});
}
I'm trying to use basic onPlayerStateChange events in the Youtube IFrame API to track starts/stops/finishes in Google Analytics. The code worked in October, but now the video won't display. GA tracking code is the same and I get the same results in Wordpress and Drupal. Is it changes to the API?
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '461',
width: '560',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data ==YT.PlayerState.PLAYING)
{_gaq.push(['_trackEvent', 'Videos', 'Play', ‘AnyEvent’ ]); }
if (event.data ==YT.PlayerState.ENDED)
{_gaq.push(['_trackEvent', 'Videos', 'Watch to End', ‘AnyEvent’]); } }
</script>
<div id="player"></div>
Those are curly-single-quotes around ‘AnyEvent’, right? That's not valid JavaScript.