homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Can't get YouTube embed to work in IE locally
Youtube player locally IE
bramley




msg:4474304
 5:40 pm on Jul 10, 2012 (gmt 0)

It's a JavaScript enabled chromless player. Works fine online. Locally, ok with Firefox but I can't get it to work on IE.

Any ideas?

Thanks!

 

Fotiman




msg:4474316
 5:59 pm on Jul 10, 2012 (gmt 0)

Possibly a security setting? Hard to tell without example code to determine if it's a code problem or not. Look at Tools > Internet Options > Security, and check the settings of the different zones. You might also look at the Advanced tab and look through the security settings.

bramley




msg:4474320
 6:11 pm on Jul 10, 2012 (gmt 0)

Hi Fontiman. I've tried many of the checkboxes there.

IE asks if it's ok to run the javascript and it does when i say yes, except for loading or starting the player - just standard code that works everywhere else, including IE when online.

I did once get the following message, but no longer see it :


function EMBQ(a){var b=EMB5b;b.source&&(a.id=b.e,a=JSON.stringify(a),b.source.postMessage(a,b.origin))};

IE highlights b.source.pstMessage(a,b.origin) as the error (invalid argument)

Fotiman




msg:4474326
 6:39 pm on Jul 10, 2012 (gmt 0)

Well, bramnley, like I said, it will be difficult for anyone to offer useful advice without a code sample.

bramley




msg:4474361
 9:42 pm on Jul 10, 2012 (gmt 0)

Here's the simplified test case. Works in all browsers online. Works in FF offline / locally. But not in any IE.

<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
// 2. This code loads the IFrame Player API code asynchronously.
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: '480',
width: '853',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert("player ready");
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 (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>

Fotiman




msg:4474380
 10:44 pm on Jul 10, 2012 (gmt 0)

I saved that to a file on my desktop, then right clicked the file and chose Open with > Internet Explorer. In Internet Explorer, I saw a message bar along the top (inside the tab) that read "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options...". I clicked it, and selected "Allow blocked content". Another dialog popped up asking if I was sure, and I clicked "Yes". The video then appeared.
Note, the bottom right of my browser says Protected Mode: Off.

Fotiman




msg:4474381
 10:44 pm on Jul 10, 2012 (gmt 0)

To summarize, though, it's got to be one of your security settings, vs. a code problem.

bramley




msg:4474422
 12:46 am on Jul 11, 2012 (gmt 0)

Hi Fontiman.

Yes the video appears and one can press the red play button.

But notice that the events are never fired. I added an alert. They do in FireFox. But I see this as a bug in YT code. Without the events I cant control the player with my own Javascript controls, which is the point.

bramley




msg:4474423
 12:50 am on Jul 11, 2012 (gmt 0)

I get the following error repeatedly :

SCRIPT87: Invalid argument.
www-embed_core_module-vflRHPI6i.js, line 35 character 70

Which is

function EMBQ(a){var b=EMB5b;b.source&&(a.id=b.e,a=JSON.stringify(a),b.source.postMessage(a,b.origin))};

IE highlights b.source.postMessage(a,b.origin) as the error (invalid argument)

Fotiman




msg:4474614
 2:13 pm on Jul 11, 2012 (gmt 0)

1. It's "Fotiman", not "Fontiman". :)
2. I believe this is some sort of IE security restriction, though I'm not sure how to get around it.

The simple solution would be to not run this directly from the file system on your machine, and instead run it in a local webserver. That is, instead of pointing your browser at "C:\path\to\file.htm", you would put in "http://localhost/file.htm"

bramley




msg:4474680
 4:37 pm on Jul 11, 2012 (gmt 0)

I don't seem to have a localhost set up.

It works in Chrome also btw; only IE has the issue. I'm pretty sure it is a bug in the YT code though.

Fotiman




msg:4474713
 5:51 pm on Jul 11, 2012 (gmt 0)

No, as I've said, I don't think this is a bug, this is just IE's security settings preventing local execution. My advice would be to get a local web server running on your development machine. If you're on Windows (obviously, since you are seeing this with IE), you could install IIS or a WAMP install. You could even use node.js (http://nodejs.org) to create a local webserver. Shouldn't take more than 15 minutes to get something up and running.

Opening a web page directly from the file system will always be a hit or miss, and just isn't a reliable way to develop.

bramley




msg:4474746
 9:03 pm on Jul 11, 2012 (gmt 0)

It's for people who download my software - would be nice if it worked straight from the file system.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved