Question

我目前正在建立一个顶部有一个大英雄视频的网站，我想覆盖一个自定义标题卡。该项目要求标题卡在悬停时稍微改变颜色，点击后消失并播放隐藏在其后面的YouTube视频。

第一部分是用悬停文字制作一个大英雄形象，很容易（http://couchcreative.co/tcc/stories.html）。但是，现在，我正在努力完成以下步骤：

1）让标题卡在点击时消失，显示下面的YouTube视频（我猜我会使用某种形式的javascript来切换不透明度或在div上显示更改以换出这两个元素？）。

2）让点击立即开始播放YouTube视频，这样用户无需点击两次即可观看视频。

3）确保视频暂停或完成播放时标题卡不会回来。

我一直在使用YT的javascript API，并且我已经根据我的需要定制了一个无边框播放器，但我在使用javascript确保标题卡消失并且视频开始播放时出现问题。任何帮助将不胜感激！

Answer 1

想出来。原来，YouTube API要求我准备播放器，我没有意识到这是必要的。添加了一些jQuery fadeIn和fadeOut，我很高兴。我所要做的就是创建一个包含以下内容的新JS文件：

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
    });
}

$('a.containerdiv').click(function() {
    $('.titlecard').fadeOut('fast', function() {

    });

    $('.youtubevideo').fadeIn('fast', function() {

    });

    player.playVideo();

});

我还确保在我的HTML中调用YouTube API文件，我意识到这已经很晚了，我忘记了。动画结果也很好。甜！

制作用于点击播放视频的YouTube视频标题卡

1 个答案: