YouTube播放器的加载,播放,和监听视频结束

css

.box #player{display: block;position: absolute;top: 0px;width: 100%;height: 100%;left: -9999px;}

html

<div class="box">
    <img src="/box_img.jpg" alt="">
    <div id="player"></div>
</div>

js

<script src="http://www.youtube.com/player_api"></script>
<script>
    // youtube
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '100',
            width: '100',
            videoId: 'IjA2fxOZDuk',
            events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
            }
        });
    }

    // 当视频加载时
    function onPlayerReady(event) {
        jQuery(".box").click(function () {
            jQuery(".box iframe").css({"left":"0px"});
            player.playVideo();
        });
    }

    // 当视频结束时
    function onPlayerStateChange(event) {
        if(event.data === 0) {
            jQuery(".box iframe").css({"left":"9999px"});
        }
    }
</script>