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.
Related
When an embedded video is paused, YouTube will display a menu with "More Videos". I tried "$('.ytp-expand-pause-overlay .ytp-pause-overlay').css('display','none');" but it doesn't work. May I know how to disable the "More Videos" feature?
Here is the source code:
<iframe id="videoplayer"
width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&color=white&showinfo=0&ecver=2&rel=0&modestbranding=1&origin="
frameborder="0"
style="border: solid 4px #37474F">
</iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'videoplayer';
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('videoplayer',
{
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('videoplayer').style.borderColor = '#FF6D00';
$('.ytp-expand-pause-overlay .ytp-pause-overlay').css('display','none');
}
function onPlayerStateChange(event) {
document.getElementById('videoplayer').style.borderColor = '#37474F';
}
</script>
Could you use playerVars for this? Documentation
<script type="text/javascript">
const tag = document.createElement("script");
tag.id = "videoplayer";
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("videoplayer", {
height: "360",
width: "640",
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
modestbranding: 1,
rel: 0, // <--- I think this is the option you're looking for
showinfo: 0,
ecver: 2,
origin: "",
},
events: {
onReady: onPlayerReady(),
onStateChange: onPlayerStateChange(),
},
});
}
function onPlayerReady(event) {
document.getElementById("videoplayer").style.borderColor = "#FF6D00";
}
function onPlayerStateChange(event) {
document.getElementById("videoplayer").style.borderColor = "#37474F";
}
</script>
Background video loads properly and autoplays etc. when the page is first loaded (and when refreshed) but when navigating to the page via the navbar links the video wont load.
Site is using Ruby on Rails if that makes any difference.
I suspect my issue is somewhere in the js but I'm new to this and haven't been able to sort out what isn't triggering
Script for the video:
// Video Script //
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
// Inserts YouTube JS code into the page.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
// onYouTubeIframeAPIReady() is called when the IFrame API is ready to go.
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '7copSLUofm8',
playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo': 0, 'rel': 0, 'enablejsapi':1, 'wmode' : 'transparent'},
events : {
'onReady' : pkOnPlayerReady,
'onStateChange' : pkOnPlayerStateChange
}
});
}
function pkOnPlayerStateChange(e) {
var frm = $(e.target.getIframe());
if (e.data === YT.PlayerState.ENDED) {
if ('player' === frm.attr('id')) {
player.playVideo();
}
}
if (e.data === YT.PlayerState.BUFFERING) {
if ('player' === frm.attr('id')) {
e.target.setPlaybackQuality('hd720');
}
}
}
function pkOnPlayerReady(e) {
player.mute();
e.target.setPlaybackQuality('hd720');
}
//Load a youtube pixel
var pkEnableYoutube = function() {
var deferred = jQuery.Deferred();
var img = new Image();
img.onload = function() { return deferred.resolve(); };
img.onerror = function() { return deferred.reject(); };
img.src = "https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif?"+ new Date().getTime();
return deferred.promise();
};
//When the video starts to load, set a timer for the video wrap to fade in
jQuery(function($){
$.when(pkEnableYoutube()).done(function(){
setTimeout(function() {
$('.video_wrap').fadeIn();
}, 2000);
});
});
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 jCarousel (jquery) running for several youtube videos. The carousel works great, and even pauses when you hover on a slide- but it will resume if you move your cursor off the slide, even if the video is playing.
Videos are embedded using the YouTube Player API.
Plugin: http://sorgalla.com/jcarousel/
This is the Carousel code I'm using:
<script type="text/javascript">
function mycarousel_initCallback(carousel, item, idx, state){
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
$('#mycarousel').hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(function() {
$('#mycarousel').jcarousel({
auto: 2,
wrap: 'both',
initCallback: mycarousel_initCallback
});
});
</script>
The YouTube script:
<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 done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '505', // 535
width: '900',
videoId: 'DxZve0UV6UM',
playerVars: {
'autoplay': 0,
'controls': 0,
'modestbranding': 1,
'wmode': 'opaque'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.setPlaybackQuality('hd720');
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
And the HTML...
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<div id="player"></div>
</li>
<li>
<div id="player"></div>
</li>
</ul>
Any suggestions?
Simply call carousel.startAuto() and carousel.stopAuto() when the player triggers an event:
function onPlayerStateChange(evt) {
if(evt.data == YT.PlayerState.PLAYING) {
global_carousel.stopAuto(); // Stop the carousel, if video is playing
} else {
global_carousel.startAuto(); // Otherwise, start it
}
}
Edit:
Make the variable carousel global inside mycarousel_initCallback:
var global_carousel;
function mycarousel_initCallback(carousel, item, idx, state) {
global_carousel = carousel;
//Other code
Then use that instead in the code before (as I've edited).