更改全屏html5視頻的尺寸

Question

有沒有辦法修改視頻的全屏功能在瀏覽器中的行爲方式？我想在屏幕左側顯示視頻，在右側顯示圖片（實際上是PDF）。

我曾與CSS在Chrome嘗試過：

video:-webkit-full-screen 

這給了我一些成果，但不希望的一個。我應該爲此創建自定義操作嗎？如果是這樣，我怎麼讓視頻突破瀏覽器的邊界？

Answer 1

你應該插入一個<div>內<video>標籤的定義height和width具有以下屬性：

.video-container { 
    position: relative; 
    height: auto; 
    width: 60%; 
} 

video { 
    width: 100%; 
    max-width: 500px; // Or whatever value on your choice 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

隨着width 100的％，該視頻將填補整個瀏覽器的空間，但限制有多大可以通過設置max-width或max-height來獲得分辨率和響應度。我希望我的回答能幫助你！

編輯

以適應一個正確裏面div，你必須分配到容器position: relative和position: absolute到影片本身。如果你想突破邊界，那麼你必須調整視頻的max-height和max-width的尺寸。

請檢查此question，因爲它與您的類似。