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
}
});
Related
I'm having trouble changing Youtube Id. When I clicked the button, I could not Change the ID Value and make it play the other one.
My codes are as below
Html Code
<button data-id="L9YYN3-sdTM" onclick="youTubePlayerChangeVideoId('DrQRS40OKNE');"> Şimdi Müzik Çal</button>
<button data-id="wHGVz5iEY_Q" onclick="youTubePlayerChangeVideoId('wHGVz5iEY_Q');"> Şimdi Müzik Çal</button>
And Js Code
function youTubePlayerChangeVideoId(data) {
var video = data;
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: video,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
var el2 = document.getElementById('playAudio');
setTimeout(function(){ el2.click() }, 1000);
};
When I Click the Button, that Id video starts and the other one stops.
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');
}
}
I have a youtube video that starts running without controls as I specified when creating the object.
I want to show the controls when the video ended, how to do that?
Here is my code:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'cZ5zFdViWlE',
playerVars : {
'controls' :0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
//code to show controls should be here
}
}
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"
}
});