通過點擊隱藏DIV，並通過JavaScript創建另一個DIV？

OK，這是很難說（對不起我的蹩腳的英語）... 我想創建一個自定義的預覽圖像到我的嵌入式媒體（你管和東西）......通過點擊隱藏DIV，並通過JavaScript創建另一個DIV？

這是我怎麼想的它可以工作：

我有一個視頻的預覽圖像和自定義播放按鈕
一個DIV點擊該圖像/按鈕DIV皮和...
之後。 ..另一個DIV出現而不是原來的iframe嵌入代碼
視頻會自動啓動

這裏有一個小例子（但我不知道究竟怎麼了這是通過做的fancybox ..？）： http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the-olympic-games/

任何想法我怎麼能做到這一點「輕鬆」？

非常感謝！

來源

2012-07-25 Jochen Schmidt

如果這只是出於顯示原因而不是性能，那麼它可能是最容易加載兩個div，加載div絕對定位在視頻和視頻隱藏。然後，一旦你點擊你可以使用YouTube的API自動播放。

隱藏和顯示部分是這裏http://jsfiddle.net/TUMcm/和YouTube API是這裏https://developers.google.com/youtube/js_api_reference

一點信息

所以，如果您的播放器是這樣

<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-25 15:03:47

哎，這個完美！非常感謝，男人！ – 2012-07-25 15:45:50

好吧，正如我所說：它很棒！但如果我設置YouTube視頻播放器來播放視頻在後臺啓動（甚至在我點擊該「加載器」div之前）......奇怪的...... – 2012-07-25 16:04:00

你不想設置你管視頻自動播放加載，你不想讓它玩。相反，你要在點擊功能添加一個方法來火的YouTube API和發揮 – 2012-07-25 17:10:21

像這樣的東西應該讓你開始：

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-25 15:00:30 lbstr

通過點擊隱藏DIV，並通過JavaScript創建另一個DIV？

回答

相關問題