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/
Related
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');
My iframe html
<iframe id="player" frameborder="0" width="660" height="371" allowfullscreen="" src="https://www.youtube.com/embed/CMm6tDavSXg?feature=oembed">
My youtube js
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('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
But still it does not start playing or anything else... Where is the issue here? Thank you
onPlayerReady will not fire the ready check on localhost.
Also when linking your youtube.js file it has to come after the iframe.
add ?enablejsapi=1
sometimes double linking in both player_api and iframe_api will also help
//< before www. not https://
placment is key.
EDIT: the problem is with the fact that you also need to add ?enablejsapi=1 to the video
embed link.
//www.youtube.com/embed/F4efZDqXZKA?enablejsapi=1
fiddle: http://jsfiddle.net/y89je0k8/
That will solve your problem.
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 iFrame that displays an embedded youtube video.
<iframe width="560" height="315" src="http://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
What I would like to do is somehow capture the click event when the user clicks the you tube video so that I can call an http://myserver.com/dostuff rest api to update an external server counter tracking the number of clicks and of course allow the video to play as expected.
Any information would be greatly appreciated.
You can't, I believe. That would be a security risk. If you mainly want to do tracking and whatnot, you would probably be best off doing something like adding an image/button in the place of the video that the user clicks, causing the video to appear.
Edit: This solution may work too; I'm not sure if it'll work for iframes that aren't on the same domain.
window.postMessage could help. But you should have an access to source code of the page you're rendering in iframe.
So in case of embedding of youtube video, you probably can't deal with this.
Everybody had great feedback. Thanks for all who posted. After trying some hacks the bottom line is that trapping the click event is not natively supported via html or javascript.
The best artifact and cleanest solution that I have found is here.
//Its possible by recording the stateChange in the video.
//HTML code----
<!DOCTYPE html>
<html>
<body>
<div id='vidWrapper'>
//your iframe tag goes here.
<iframe id="video-id-first" src="https://www.youtube.com/embed/nNlEiuqiKAk?enablejsapi=1&origin=http%3A%2F%2F3.7.232.244" gesture="media" allow="encrypted-media" allowfullscreen="" data-gtm-yt-inspected-53610233_3="true" width="560" height="400" frameborder="0"></iframe>
</div>
</body>
</html>
//JS code ----
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;
var width = document.getElementById("video-id-first").getAttribute("width");
var height = document.getElementById("video-id-first").getAttribute("height");
var src = document.getElementById("video-id-first").getAttribute("src");
//splitting to get the videoId from src.
var partsArr = src.split("/");
var videoSource = partsArr[partsArr.length -1 ].split("?");
var videoId = videoSource[videoSource.length -2 ];
function onYouTubeIframeAPIReady() {
player = new YT.Player('vidWrapper', {
height:height,
width: width,
videoId: videoId,
events: {
'onStateChange': function(event) {
if (event.data == YT.PlayerState.PLAYING) {
startVideo();
}
if (event.data == YT.PlayerState.PAUSED) {
stopVideo();
}
}
}
});
}
function startVideo() {
//write your functionality here.
alert('Video Started');
}
function stopVideo() {
//write your functionality here.
alert('Video Paused');
}
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();
});
});