Im using youtube embed api to add video to my site https://developers.google.com/youtube/iframe_api_reference
var player = new YT.Player(playerEl, {
width: "450",
height: "250",
controls : 0,
showinfo : 0,
videoId: videoId,
});
The problem is that I dont want to show video Info and controls on my video... but i just cannot get this working. Is there a way to remove info nad controls for iframe embed ?
Try this:
var player = new YT.Player(playerEl, {
width: "450",
height: "250",
videoId: videoId,
playerVars: {
controls: "0",
showinfo: "0"
}
});
Related
I'm using the YouTube Player API to display a window-sized background video playlist. If I view the playlist on YouTube they look great, but served through the Player API they are of low quality. They tend to clear up a little after a few seconds, but they are never as beautiful as they are on the YouTube site. Is there a fix?
My code:
(function iframeSetup() {
var iframeTag = document.createElement('script');
iframeTag.src = "https://youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(iframeTag, firstScriptTag);
})();
function onYouTubeIframeAPIReady() {
var videoPlayer = document.getElementById('home-page-video--player');
if (videoPlayer !== null) {
homePlayer = new YT.Player('home-page-video--player', {
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
listType: 'playlist',
list: '<playlist id here>',
loop: 1,
modestbranding: 1,
mute: 1,
playsinline: 1,
rel: 0,
showinfo: 0,
},
events: {
'onReady': onPlayerReady
}
});
}
}
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
NOTE: I'm using Javascript setAttribute to tweak the width and height on the iframe according to the device, so they are appropriate.
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!
I am using the YouTube API, and my intention is to, when a user clicks on a video to play it, instead pause or stop the video, and then show a popup asking them to give me their email address. When they do that or close the popup, it would then start the video playing.
This works fine on my desktop. But on the iPhone, Safari opens up the full screen video player thingy... with a paused/stopped video. Closing that by clicking 'Done' brings me back to the website, with the email popup thing visible... and closing that will start the video playing..
But I want to be able to show that popup BEFORE iPhone Safari opens up the blank video player. Any suggestions?
Gary
Edit: My code so far is this:
function set_up_video(){
$.each($('.youtube-player'), function(){
player_id = 'iamavl-video-'+$(this).attr('data-service-id')
player_element = $('#'+player_id);
player = new YT.Player(player_id, {
height: '461',
width: '707',
videoId: $(this).attr('data-service-id'),
events: {
'onReady': onPlayerReady
},
wmode: 'transparent',
playerVars: {
autohide: 1,
autoplay: 0,
cc_load_policy: 0,
color: "red",
controls: 1,
disablekb: 0,
enablejsapi: 1,
fs: 1,
iv_load_policy: 3,
loop: 0,
modestbranding: 0,
rel: 0,
showinfo: 0,
start: 0,
theme: "dark",
version: 3,
wmode: "transparent"
}
});
});
}
function onYouTubeIframeAPIReady() {
set_up_video();
}
function onPlayerReady(event) {
player.addEventListener('onStateChange',onPlayerStateChange);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
//console.log('PLAYING');
player.pauseVideo();
$('#email-collection-modal').addClass('shown-once').modal('show');
}
if (event.data == YT.PlayerState.ENDED) {
//console.log('ENDED');
}
if (event.data == YT.PlayerState.PAUSED) {
//console.log('PAUSED');
}
if (event.data == YT.PlayerState.BUFFERING) {
//console.log('BUFFERING');
}
if (event.data == YT.PlayerState.UNSTARTED) {
//console.log('UNSTARTED');
}
}
How can I default to the high-res version of my thumbnail in iOS?
This question never had an answer: https://productforums.google.com/forum/#!topic/youtube/77Vky3bso54
For example, instead of: http://img.youtube.com/vi/XLDDP9f4a-g/hqdefault.jpg I want the player to use: http://img.youtube.com/vi/XLDDP9f4a-g/maxresdefault.jpg
My player is 920px by 518px. I get the high-res thumbnail on my desktop browser, but not on my iPad with iOS 8.4.
I'm using youtube's iframe api to display the player, initialized like this:
new YT.Player(container, {
videoId: videoId,
width: 920,
height: 518,
playerVars: {
'autoplay': 0,
'controls': 1,
'modestbranding': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
Is there a way to init YouTube iframe player without actualy loading video itself?
If do not provide videoId video is not loaded (no errors is shown) and player instance remains in "ready" state.
ytPlayer = new YT.Player('video-player', {
height: '100%',
width: '100%',
videoId: 'video-id-goes-here',
playerVars: {
.....
.....
Thanks for answer!
Sure, if you want to, the following code does work:
<script>
function onYouTubePlayerAPIReady() {
var player = new YT.Player('player', {
events: {
onReady: function() {
player.loadVideoById('sOEAD-gfJ_M');
}
}
});
}
</script>
<script src="//www.youtube.com/player_api" type="text/javascript"></script>
Alternatively, if you know you're going to be loading a playlist, you can leave out videoId and put in
playerVars: {
list: 'PLAYLIST_ID'
}
But while both of those approaches do work, what are you trying to accomplish? There might be a better way of doing it than initializing a YT.Player without the videoId.