My page has several youtube player, it caused the page loading slowly.
This is my code↓
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('player1', {
height: '100%',
width: '100%',
videoId: 'mCx3oxXBmGA'
});
player2 = new YT.Player('player2', {
height: '100%',
width: '100%',
videoId: 'SpWR0sSEgMc'
});
the HTML↓
<div id="player6"></div>
There are 12 video in this page, how can I optimized it?
Do not embed all 12 players at once. Instead present some cover image of the YouTube movie (static img) and bind click event on it.
When user will click specific image, remove it from the DOM and create player instead of it.
Related
Youtube's IFrame API is not working for me anymore. Both onYouTubeIframeAPIReady() and onYouTubePlayerReady() gets executed. However, when try loading/playing a video, I receive the following error:
base.js:2575 Uncaught TypeError: Cannot read property 'g' of null
at jL (base.js:2575)
at nL (base.js:2567)
at PU.g.h.nh (base.js:5853)
at E0 (base.js:3841)
at q1.g.h.Lr (base.js:6904)
at q1.g.h.Dy (base.js:6905)
at r1 (base.js:3909)
at L1.g.h.Vn (base.js:6937)
at L1.g.h.nN (base.js:6679)
at g.bD.g.h.V (base.js:5529)
Here is how I use the IFrame API
// Load YouTube Player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Create YouTube Player
var jukeBoxYoutubePlayer;
function onYouTubeIframeAPIReady() {
console.log("iframe api ready");
jukeBoxYoutubePlayer = new YT.Player('youtube_player', {
height: '400px',
width: '400px',
events: {
'onReady': onYouTubePlayerReady
}
});
}
// On Ready Event
function onYouTubePlayerReady(event) {
console.log("player ready");
jukeBoxYoutubePlayer.unMute();
jukeBoxYoutubePlayer.setVolume(75);
}
Here is how I load and play a video:
jukeBoxYoutubePlayer.loadVideoById("ubtbkgUmHHE", 0, "large");
jukeBoxYoutubePlayer.playVideo();
I don't see why my code is not working. It has been working for months. I also re-checked the docs (https://developers.google.com/youtube/iframe_api_reference) for any new changes, but can't find any.
It seems the issue was that my "youtube_player" iframe was hidden by CSS display:none. Apparently, YouTube requires the iframe to be visible. However, sizing the iframe to 1x1 px solved it for me.
I have the JS code and must convert this to 100% width, 800px height and pointer-events: none; is there any chance to add this to this code ?
This code change youtube video to muted.
<!-- 1. The <div> tag will contain the <iframe> (and video player) -->
<div id="player"></div>
<script> // 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1,'playlist': '2oqCAmfc0D0','autohide':1,'showinfo': 0,'disablekb': 1,'rel': 0,'wmode':'opaque' },
videoId: '2oqCAmfc0D0',
width: '100%',
events: {
'onReady': onPlayerReady}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
</script>
Something like this you mean? JSFiddle Example
<!-- 1. The <div> tag will contain the <iframe> (and video player) -->
<div id="player" style="pointer-events: none;"></div>
<script> // 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1,'playlist': '2oqCAmfc0D0','autohide':1,'showinfo': 0,'disablekb': 1,'rel': 0,'wmode':'opaque' },
videoId: '2oqCAmfc0D0',
width: '100%',
height: '800px',
events: {
'onReady': onPlayerReady}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
</script>
Be warned, pointer-events has some compatibility issues with older IE. See caniuse
Another way of doing the same thing is to have an overlaying div with visibility: hidden. Or an overlaying transparent div.
You kind of see my lame attempt by trying to wrap the div inside of an anchor tag. Is it possible to add a zone abouve the video for when the user clicks on it, it automically brings up a new browser tab with a new webpage.
<style>
#player {
margin: auto;
width: 400px;
height: 273px;
}
.playerclick{
target-name:new;
target-new:tab;
}
</style>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 1, 'modestbranding':1, 'autohide':1,'wmode':'opaque', 'rel':0, 'showinfo':0},
videoId: 'mO03zQQ8XIo',
events: {
'onReady': onPlayerReady}
});
}
function onPlayerReady(event) {
event.target.mute();
}
</script>
You can put another div over iframe video and set click event there. See here.
<a href="http://www.elmariachimexican.com" target="_blank">
<div style="position:absolute;width:273px;height:400px"></div>
<div id="player"></div>
</a>
Also the adding of video to page doesn't seem to work, so I changed it little bit.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
document.getElementById("player").appendChild(tag);
See working example here
I am creating an interactive video site and have this function:
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 done = false;
var player;
function videoChosen(btnid) {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':2,'disablekb':1,'modestbranding':1,'fs':0 },
videoId: btnid,
events: {
'onStateChange': onPlayerStateChange
}
});
}
But I can't find a way to change the video player position (it keeps loading on the top left side of the browser). Is there a way using CSS targeting the player that was summoned using the function?
It looks like possibly you're missing the div for your player, i.e
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
Have a look at this link. Your player will take the place of this div, as it says. So, place the div where you want the player.
Hope this helps.
Having problems getting a Chromeless player with autoplay to work. The code I am trying was copied directly from the developers.google.com documentaiton:
https://developers.google.com/youtube/youtube_player_demo
IFRAME Example: http://jsfiddle.net/BN6Sa/
<iframe width="720" height="405" src="//www.youtube.com/embed/M7lc1UVf-VE?feature=player_embedded&autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>
JS Example: http://jsfiddle.net/7DWTU/
<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: '405',
width: '720',
videoId: 'M7lc1UVf-VE',
autoplay:1,
controls:0,
loop:1,
rel:0,
showinfo:0,
theme:'light'
});
}
</script>
When using the iFrame API, anything that's a player object parameter (i.e. something that you might append as a URL parameter if you were to embed the player just as an iFrame rather than with the API) needs to be set as part of the playerVars parameter object rather than as a direct parameter to the YT.Player argument. Specifically, your code should look like this:
<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: '405',
width: '720',
videoId: 'M7lc1UVf-VE',
playerVars: {
autoplay:1,
controls:0,
loop:1,
rel:0,
showinfo:0,
theme:'light'
}
});
}
</script>