使用CSS或html的動態視頻/圖像樣式

我可以在我的HTML頁面中嵌入一個YouTube視頻剪輯，使用CSS或html的動態視頻/圖像樣式

<div class="videob">  
     <iframe title="YouTube video player" 
     class="youtube-player" type="text/html" 
     width="610" height="390" src= 
     "http://www.youtube.com/embed/grh03-NjHzc" 
     frameborder="0" allowFullScreen> 
     </iframe> 
</div>

我道歉，如果我遇到那樣的模糊，但我真正想要的是點擊時剪輯前來頁面的中心和背景變暗。類似於Google Chrome中的「關閉燈光」應用程序。我想爲圖片做同樣的事情。

來源

2011-08-30 user869494

什麼中心？父母頁面？ IFRAME？ –

這不能用CSS來完成。你需要製作一個隱藏的background-bg div，它有一個固定的位置並覆蓋整個頁面，給它黑色背景和一些不透明度。然後，您可以在點擊視頻後顯示javascript和videob div。或者，您可以使用javascript創建背景div。 videob div也需要有固定（或絕對）的位置，你需要留下：50％;和margin-left： - （元素寬度/ 2）將它放置在屏幕的中心。希望這會讓你開始。 – riku

您可以使用lightbox-script，例如[Fancybox]（http://fancybox.net/blog#tip4）（在他們的網站上有一個YouTube示例），並在該lightbox內顯示視頻。 – feeela

我更喜歡Shadowbox，因爲Fancybox往往會導致IE凍結。您可以在安裝太極拳後，所以檢查出來這裏

http://www.shadowbox-js.com/

...

這裏的頭：

<link rel="stylesheet" type="text/css" href="includes/shadowbox.css"> 
<script type="text/javascript" src="includes/shadowbox.js"></script> 
<script type="text/javascript"> 
Shadowbox.init(); 
</script>

這是你的視頻：

<a href="http://www.youtube.com/embed/grh03-NjHzc" rel="shadowbox;width=610;height=390;" title="Nelson Mandela's inaugural address">

乾杯！

來源

2011-09-04 21:41:56 abracassabra

使用CSS或html的動態視頻/圖像樣式

回答

相關問題