单击图像后如何播放/启动 vimeo 视频？

Question

我有一些代码，适用于 youtube 视频，但我需要与 vimeo 视频相同的效果，想知道如何做到这一点，有什么建议吗？需要用 vimeo 替换 youtube 描述，但我不知道该怎么做。 P.S 对不起我的英语...

<style type="text/css">
#head {
    background-color:transparent;
    width:100%;
}
#container {
    cursor:pointer;
    width:520px;
    height:380px;
}

.inactive-state {
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url();
}
.hover-state {
    background-image: url();
}
</style>
        <section id="head">
    <div id="container" class="click-to-play-video inactive-state">
        <div id="player" class="home-player"></div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#container").mouseenter(function () {
        $(this).addClass('hover-state');
    }).mouseleave(function () {
        $(this).removeClass('hover-state');
    });

    $("#container.click-to-play-video").click(function () {
        $('#head').css({ "background-color": "transparent" });

        player = new YT.Player('player', {
            width: '520',
            height: '300',
            videoId: 'qlEUrEVqDbo',
            playerVars: { 'autoplay': 1 },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    });

    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;
    function onPlayerReady(event) {
        //event.target.playVideo();
    }
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            player.destroy();
            $('#head').css({ "background-color": "transparent" });
        }
    }
</script>

Answer 1

以最简单的形式，你会想要这样的东西。只需删除图像并附加 iframe，并启用自动播放。

$('.vimeo-img').click(function (event) {

  var $this = $(this),
      $parent = $this.parent();

  $this.remove();

  $parent().append('<iframe src="..." autoplay="true"></iframe>');
})