0

現在、大きなヒーロービデオを上部に配置したサイトを構築していますが、カスタムタイトルカードをオーバーレイしたいと思います。このプロジェクトでは、ホバーするとタイトルカードの色が少し変わり、クリックすると消えて、その後ろに隠れているYouTubeビデオを再生する必要があります。

最初の部分は、ホバーテキストを使用して大きなヒーロー画像を作成するのは簡単でした（http://couchcreative.co/tcc/stories.html）。しかし今、私は次のステップで苦労しています：

1）クリックするとタイトルカードが完全に消えて、下のYouTubeビデオが表示されます（何らかの形式のJavaScriptを使用して不透明度を切り替えたり、divに変更を表示して、2つの要素を入れ替えたりしますか？）。

2）クリックしてYouTubeビデオの再生をすぐに開始できるため、ユーザーはビデオを視聴するために2回クリックする必要がありません。

3）ビデオが一時停止または再生を終了したときに、タイトルカードが戻らないようにします。

YTのjavascriptAPIをいじくり回していて、クロムレスプレーヤーを必要なものにカスタマイズしましたが、タイトルカードが消えてビデオの再生が開始されるようにするjavascriptに問題があります。どんな助けでも大歓迎です！

4

1 に答える 1

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ファイルを呼び出すようにしましたが、これはかなり遅れて忘れていたことに気づきました。結局、アニメーションもかなり大丈夫でした。甘い！

于 2013-01-31T04:09:01.617 に答える