We are a small nonprofit organization and desperately need assistance as follows:
We have an issue; click the submit button, and the ReCaptcha forces the frame to reload. In that interval, the comment section sort of goes down a layer.
Question: How does our developer remove the blue reCAPTCHA row upon selecting the comments button?
See the screenshot images below for details.
Note: The issue did not exist without the IFrame Player API.
Hal
Screenshot image of the Error Message below:
GitHub Gist link to Front-End Browser code, here.
Front-End Browser Code
<script src="https://gist.github.com/CforED/62c7013e51dc85f49180c3308e742d26.js"></script>
IFrame Player API Script
<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', {
videoId: 'WLkkzqzo4p0',
playerVars: { 'autoplay': 1, 'playsinline': 1,'loop': 1, 'controls': 0, 'playlist': 'WLkkzqzo4p0'},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
JavaScript
<script type="text/javascript">
(function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo");
vgo('setAccount', '224274263');
vgo('setTrackByDefault', true);
vgo('process');
Related
I have tried to implement the YouTube API into my site, and it was working fine up until a few days ago, and after hours and hours of no progress, I have made a fiddle with a basic setup, and I can't get it to work when you have an iFrame already embedded in the page.
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('testplayer');
}
function playthevideo() {
player.playVideo();
};
jQuery( document ).ready(function() {
jQuery('.testing').on('click', playthevideo);
});
http://jsfiddle.net/parvavilla/GXC4e/
When you click the button, the console says:
Uncaught TypeError: Object #<S> has no method 'playVideo'
Any ideas what I have done wrong in this fiddle?
The problem is that you are already loading a video via iframe. The API doesn't expect that. What you need instead is just a normal container. In your HTML:
<div id="testplayer"></div>
Then in your JavaScript:
player = new YT.Player('testplayer', { videoId: 'M7lc1UVf-VE' });
JSFiddle: http://jsfiddle.net/GXC4e/2/
I am working on a small project that envolves geting the time to wich a user skips to when playing a video.
I am using the javascript part of the API to play the video, pause and so on, but I cannot seem to understand how to get the time that the user skips to. I know I can seekTo on my own... But there seems to be no corresponding event for when the user does this
I am trying to find the event that fires when the user skips to a certain time...
From YT API I see they do not have such an event (in javascript... I wouldn't like to create my own custom player based on HTML5 and/or AS3).
It seems that there isn't a real way to do it, but probably you can "intercept" it and understand it, it won't take long:
In this page you can see all the featurea available for the api. You can do it in 2 way:
checking and confronting the time of the video with a counter continuously (probably a bad idea).
Intercepting the player state:
There are 5 state for the player, when the player cursor is moved:
-if the player was playing, the state go from 1 to 2 and then from 2 to 1.
-if the players was paused, nothing happens to his state.
Considering that you can intercept the player state you can easily get the current time when the player is paused and then, confront it with the current time when the user restart play. In each of the 2 case, you should be able to know if the user moved or not the cursor. I don't know well this api so I don't know if some other state of the player can mean something important for your question. I think this way, if isn't complete, it's a good start from where begin developing your idea.
UPDATE
HERE IS THE CODE EXAMPLE TESTED + JSFIDDLE
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
var doing = -1;
var timenow=0;
var timeold=0;
var flag=0;
// 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: '640',
videoId: 'M7lc1UVf-VE',
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(flag==1){
flag=0;
timenow=timeold;
}else{
if((doing==-1)&&(event['data']==1)){//start play
doing=1;
}
if((doing==1)&&(event['data']==2)){//from play to pause
timeold=player.getCurrentTime();
timeold=timeold;
doing=2;
console.log('go pause at:'+timeold);
}
if((doing==2)&&(event['data']==1)){//from pause to play
timenow=player.getCurrentTime();
console.log('go play at:'+timenow);
if(timenow>timeold){
alert('are you kidding me?! You switched from '+timeold+' to '+timenow+'!');
player.seekTo(timeold);
flag=1;
}else{
timeold=timenow;
}
}
if(event['data']==5 || event['data']<1){//stopped or ended
doing=-1;
timeold=0;
timenew=0;
}
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Google changed something last days, so I have strange problem with Youtube embeded as iFrame in mobile safari. When iFrame is hidden (some parent div has set display:none) during page load and later is changed to be visible, Youtube player do not play.
Any solution? I've tried to reload iframe, when it turns to visible state, it works. But it is not comfortable solution…
I am assuming you are using the third party youtube Iframe API to load the youtube player into a div. The code from youtube actually has a race condition in it where if the div is not loaded/ parsed by the browser prior to onYouTubeIframeAPIReady being called, the video load will fail. In firefox it will just hang and for a second and Chrome is smart enough to deal with the problem.
The solution is to make sure that this code. Is run after the container holding the video is parsed.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
And this code...
function onYouTubeIframeAPIReady() {
Has global scope and is called after the script is created.
The way I typically solve this to to create a function 'class' with the tag creator and event listener and create the object in my document.ready function. Then right below the document.ready function I put.
function onYouTubeIframeAPIReady() {
myVideo.apiReady();
}
Where 'myVideo' is the class I have create and apiReady(); contains.
this.apiReady = function () {
player = new YT.Player('player', {
height: '548',
width: '900',
videoId: 'VIDEO234324',
events: {
'onReady': onPlayerReady
}
});
}
I hope this helps.
I have an embedded youtube video with hidden controls:
<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>
I can control it with the youtube Javascript API.
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() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Things like player.playVideo() and so on work perfectly. Now I am looking for a way to make the video play in fullscreen mode with a Javascript call but I couldn't find any method in the API.
Is it even possible (without the controls) and if so - how?
This worked perfect in my case. You can find more details on this link: demo on CodePen
var player, iframe;
var $ = document.querySelector.bind(document);
// init player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '300',
videoId: 'dQw4w9WgXcQ',
events: {
'onReady': onPlayerReady
}
});
}
// when ready, wait for clicks
function onPlayerReady(event) {
var player = event.target;
iframe = $('#player');
setupListener();
}
function setupListener (){
$('button').addEventListener('click', playFullscreen);
}
function playFullscreen (){
player.playVideo();//won't work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
}
You can use html5 fullscreen api:
node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool
But note that:
this usually requires vendor specific prefix like mozRequestFullScreen() or webkitRequestFullScreen
requestFullScreen has to be called on user events (like onclick)
in firefox the fullscreen will be black until "Allow" is clicked by user
I've added code to do fullscreen (real full screen, not full window) to my answer on Auto-Full Screen for a Youtube embed.
YouTube don't expose fullscreen in their API, but you can call the native browser requestFullScreen() function from the playerStateChange() event from the YouTube API or make your own custom play button like I have.
Looking at the API reference for the iframe player, I don't think it's possible to set it to fullscreen (with the iframe API alone)- ctrl f didn't find fullscreen, so either it's a secret method hidden inside the API or it doesn't exist. However, as you probably know, you can set the size of the player player.setSize(width:Number, height:Number):Object, then make the window fullscreen.
Maybe have a look at this similar question. It looks as though this might work for you (using the javascript fullscreen api rather than the Youtube API):
Full Screen Option in Chromeless player using Javascript?
You can try setting the iframe dimension to the window dimension through javascript.
Something like this (using jQuery):
$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());
I hope this can help you.
I have set up some test code that loads in a youtube video and then a jquery click event on a link that I plan to stop the video, at the moment however when I click the link I get the error: Uncaught TypeError: Object [object Object] has no method 'stopVideo'
Can anyone suggest where I might be going wrong with this?
<div id="container">
This is the link
<br /><br />
<br /><br />
<div id="player"></div>
</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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function() {
$('a').click(function(e) {
player.stopVideo();
e.preventDefault();
});
});
</script>
Your code snippet works as intended in a fiddle. Also, the YouTube Frame API won't function at a file:/// protocol, because of limitations at the postMessage implementation.
I have previously created a custom implementation of the YouTube API, available at YouTube iframe API: how do I control a iframe player that's already in the HTML?. I have successfully executed the stopVideo method at a file:/// protocol.
If you're running your code online, I can only think of one other cause: You're trying to click at the link before the player is ready. To fix it, merge your functions:
function onPlayerReady(event) {
event.target.playVideo();
$('a').click(function(e) { //<--- Binds event to ALL anchors! Are you sure?
player.stopVideo();
e.preventDefault();
});
});