Skip to content

Instantly share code, notes, and snippets.

@pierrevalade

pierrevalade/youtubechromeless.html

Created May 28, 2010 07:03
Show Gist options
  • Save pierrevalade/416859 to your computer and use it in GitHub Desktop.
Save pierrevalade/416859 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
youtubechromeless.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<style type="text/css" media="screen">
#container {
width: 640px;
height: 480px;
position: relative;
}
#play-overlay {
width: 100%;
height: 100%;
position: absolute;
background-image: url("http://nowmov.com/images/pause_screen_m_out.png");
z-index: 100;
}
#hide-yt-logo {
width: 100%;
height: 100%;
background: transparent;
position: absolute;
cursor: auto;
z-index: 100;
}
</style>
<div id="container">
<div id="hide-yt-logo"></div>
<div id="play-overlay"></div>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerid) {
ytplayer = document.getElementById("myytplayer");
ytplayer.loadVideoById("1uBEpEIjwyA");
ytplayer.pauseVideo();
}
$(function() {
$("#container").click(function() {
ytplayer = document.getElementById("myytplayer");
if (ytplayer.getPlayerState() == 1) {
// playing
ytplayer.pauseVideo();
$("#play-overlay").show();
} else {
// stoped
$("#play-overlay").hide();
ytplayer.playVideo();
}
})
});
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer", style: "position: absolute;" };
$(function() {
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3",
"ytapiplayer", "640", "480", "8", null, null, params, atts);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment