0

OK、わかりにくいです (私の片言の英語で申し訳ありません)... 埋め込まれたメディア (you-tube など) にカスタムのプレビュー画像を作成したいのですが...

ここに私がそれがうまくいくと思う方法があります:

  1. ビデオのプレビュー画像とカスタム再生ボタンを含む DIV があります
  2. その画像/ボタンをクリックした直後に、DIVが非表示になり...
  3. ...元の iframe-embed-code の代わりに別の DIV が表示されます
  4. ビデオが自動的に始まります

ここに小さな例があります (しかし、私はそれがどのように行われたか正確にはわかりません.. fancybox 経由?): http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the -オリンピック競技/

「簡単に」それを行う方法はありますか？

どうもありがとう！

4

2 に答える 2

2

このようなものから始める必要があります:

http://jsfiddle.net/lbstr/YdwEF/

あなたはマークアップを示さなかったので、あなたがそれを行う方法についての私の考えは次のとおりです。

<div class="container">
    <div class="preview">
        <!-- Some preview image here -->
    </div>
    <div class="media">
        <!-- Some embed code here -->
    </div>
</div>​

この CSS では:

.container { position: relative; }
.container .preview, 
.container .media { width: 500px; height: 350px; position: absolute; top: 0; left: 0; }
.container .preview { background-color: blue; z-index: 2; }
.container .media { background-color: red; z-index: 1; }

そして、この JS (jQuery):

$('.container .preview').click(function(){
    $(this).siblings('.media').css("z-index", 3);
});​
于 2012-07-25T15:00:30.600 に答える
2

これが表示上の理由であり、パフォーマンスではない場合は、両方の div をロードするのがおそらく最も簡単です。ロード div はビデオの上に完全に配置され、ビデオは非表示になります。その後、クリックすると、YouTube API を使用して自動再生できます。

非表示と表示の部分はこちらhttp://jsfiddle.net/TUMcm/で、YouTube API はこちらhttps://developers.google.com/youtube/js_api_referenceです

もう少し情報

SOあなたのプレーヤーがこれだった場合

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

クリック機能では、次のようなものを配置します

var myPlayer = document.getElementById('playerid');
myPlayer.playVideo();
于 2012-07-25T15:03:47.117 に答える