如何在瀏覽器中執行squeezeback？

Question

我有興趣將squeezeback添加到我的網頁中的視頻。

有沒有簡單的方法來做到這一點，而不是在視頻內部實現它？

Answer 1

將視頻放入帶有ID的div內。 使用jquery更改視頻元素的大小（可能帶有％s）。 在視頻元素（.appendElement（））之後向div中添加一個元素 用另一個東西填充它。

Answer 2

<video>是一個HTML元素，就像任何其他元素一樣，所以您可以使用CSS和JavaScript來調整它的大小，將其他元素置於其上，等等。

我可能會把視頻放在相對定位的div中。在適當的時候，使用一些腳本來相應地縮放視頻，然後引入更多絕對位於其上方/下方/旁邊的元素。世界是你的牡蠣，給它一個去，然後報告回來！

想想看，Mozilla的Popcorn.js可能對這類事情有幫助。然後

<div id="container"> 
    <div id="background">contents here</div> 
    <div id="videoWrapper"> 
     <video></video> 
    </div> 
</div> 

#container{ 
    position:relative; 
} 

#container > *{ 
    position:absolute; /*to allow stacking*/ 
    top: 0;   /*stretch to container*/ 
    bottom:0; 
    left: 0; 
    right: 0 
} 

，縮放視頻，在this post採取關於「縮放」的元素的外觀和保持縱橫比：

Answer 3

這將是重疊的絕對的div。