I'm hoping someone can help me with why my script isn't working in IE 11. Everything works in both Chrome and Firefox and partly works in IE. The problem is that IE doesn't seem to like when I call the function '.pauseVideo()'
IE Console:
Object doesn't support this property or method 'pauseVideo'
I don't know if this is just some syntax error, or if I need to do something different to support the script in IE 11.
Page displaying error - http://goforward.harpercollege.edu/dev-foundation/index-3.php
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
window.onYouTubeIframeAPIReady = function() {
for (item in players_list) {
players[players_list[item]] = new YT.Player(players_list[item], {});
}
}
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 players = new Array();
var players_list = [
"popup-youtube-player-1",
"popup-youtube-player-2",
"popup-youtube-player-3",
"popup-youtube-player-4",
"popup-youtube-player-5",
"popup-youtube-player-6"
];
function pauseVideo() {
for (item in players_list) {
players[players_list[item]].pauseVideo();
}
}
function swapvid(id) {
pauseVideo();
$('.video-slider').css('display', 'none');
$('#' + id).closest('.video-slider').css('display', 'inline');
}
</script>
Related
I'm using youtube iframe API for redirecting users to another link when the video ends. I've an existing iframe on my webpage. So I've written the below code which works on my local environment but in the live website it doesn't work.
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;
window.onYouTubeIframeAPIReady = function () {
window.YT.ready(function () {
player = new window.YT.Player(element_id, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
};
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
if (quiz_permalink) {
window.location.href = quiz_permalink;
} else if (next_lesson_permalink) {
window.location.href = next_lesson_permalink;
}
}
}
Can anyone guide me what can be the possible reason for this not working in the live website ?
Thanks in advance
I have this script as described here: YouTube Player API:
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<h1>Youtube Video</h1>
<div id="player"></div>
<script type="text/javascript">
// Load the IFrame Player API code asyncronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Creating an iframe and youtube player
var player;
function onYoutubeIframeAPIReady(){
console.log("Youtube API Loaded");
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'LSwbPyIP-gY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// When video_player is ready, call this function
function onPlayerReady(event){
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event){
if (event.data == YT.PlayerState.PLAYING && !done){
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo(){
player.stopVideo();
}
</script>
</body>
</html>
After reloading the page, nothing happing. So, at the end of the script, I call this function:
onYoutubeIframeAPIReady();
Doing this, gives me an error:
(index):25 Uncaught ReferenceError: YT is not defined
But when I check the generated source code, I see this two lines before my script tag:
<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWkc-3E/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/iframe_api"></script>
If the IFrame Player API code are being loaded, why I am getting the error "YT is not defined" ? What am I missing?
To run this test, I am using Google Chrome 51.0.2704.79 (64-bit)
You don't have to call onYoutubeIframeAPIReady by yourself.
Youtube server side code call it for you.
Check in their code you will find this code:
var Sb = l("onYTReady");
Sb && Sb();
var Tb = l("onYouTubeIframeAPIReady");
Tb && Tb();
var Ub = l("onYouTubePlayerAPIReady");
Ub && Ub();
You just load the script and it call your function.
So I'm sticking a background video into our webpage, and I have the following code:
function setupYoutubeBG(videoId){
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// , This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('bgPlayer', {
playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1, 'wmode':'opaque', 'playlist':videoId, 'loop':1 },
videoId: videoId,
events: {
'onReady': onPlayerReady}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
}
Which is pretty straightforward, pulled right from the documentation. Works fine in all browsers including IE11 but for some reason, when testing in IE9 the video doesn't loop. I've set the playlist to the videoId, and like I said, it works everywhere else. If anybody has an idea or can point me in the right direction, it would be appreciated.
I understand how to load the Youtube IFrame player API normally in a document:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
How would I do this in a meteor application though? I can't just put a <script> tag inside a template and I don't know if I can access document in one of the template helpers.
Is there some way to load it globally once the user connects for the first time?
there are several packages which can be used to use youtube iframe api
using the package adrianliaw:youtube-iframe-api we can do it like below
if (Meteor.isClient) {
onYouTubeIframeAPIReady = function () {
player = new YT.Player("player", {
height: "400",
width: "600",
videoId: "LdH1hSWGFGU",
events: {
onReady: function (event) {
event.target.playVideo();
}
}
});
};
YT.load();
}
I want to load external javascript file but I can't use AJAX requests because of same origin policy, and I have a code:
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test.js';
head.appendChild(script);
</script>
That is ok everywhere (Firefox, Chrome, Opera, IE9, IE6) but not in IE8, IE7. How can I make it work in IE8?
How about the old document.write('<script language="javascript" src="test.js"><\/script>'). Also you do not have to append to head you can use body to.
Try reading up about JsonP :)
I'm not sure why you had problems in IE, but the following worked in Firefox 4, IE6 and IE9 (i.e. the browsers I had available):
<html>
<head>
</head>
<body>
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
head.appendChild(script);
var interval = window.setInterval(function() {
if (typeof($) !== "undefined") {
$("<p>it worked!</p>").appendTo(document.body);
window.clearInterval(interval);
}
}, 100);
</script>
</body>
</html>