How do I get this jQuery Youtube Popup to work on my local website?

Question

this is my first post. I'm very new and still learning everything but I'm really stuck here. I'm experimenting whit a website localy. I'm trying to get Abhinay's jQuery YouTube Popup player to work on my site. http://lab.abhinayrathore.com/jquery_youtube/

I get the popup window and the video tries to load but it does not work. I have a feeling it got something to do whit it being local but I'm not sure. When serching I got results about CORS and JASON that might work? Could now find any simple explanation on how to use it, maybe someone can explain it a bit more simple.

This is the relevant code bit:

<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"  rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.youtubepopup.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $("a.youtube").YouTubePopup({ autoplay: 0 });
    });
</script>



<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU"
            title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>

Remember I'm very new to webdesign and coding in general so if you could explain this simple I would be very thankful!

Thanks in advance!

Answer 1

I looked into it. It will not work from your local computer directly. It needs to be on a webserver. Of course, if you have WAMP (XAMP), EasyPHP, some other WebServer installed on your computer, or just Apache, then it will work.

The youtube script uses a method to determine your protocol, and will rebuild the link based on that. Or if you really want to use it on your LOCAL computer without any web server hosting it, you could do like this:

Open jquery.youtubepopup.min.js with notepad or notepad++ and find the following lines:

function getYouTubePlayer(URL, width, height) {
    var YouTubePlayer = '<iframe title="YouTube video player" style="margin:0; padding:0;" width="' + width + '" ';
    YouTubePlayer += 'height="' + height + '" src="' + URL + '" frameborder="0" allowfullscreen></iframe>';
    return YouTubePlayer;
}

and change them to:

function getYouTubePlayer(URL, width, height) {
    var YouTubePlayer = '<iframe title="YouTube video player" style="margin:0; padding:0;" width="' + width + '" ';
    URL=URL.replace("file:","http:");
    YouTubePlayer += 'height="' + height + '" src="' + URL + '" frameborder="0" allowfullscreen></iframe>';
    return YouTubePlayer;
}

Emil