調整視頻的大小取決於屏幕尺寸少用CSS

我想在我的主頁的背景添加視頻。基本上我想避免當瀏覽器分辨率與我的視頻分辨率不同時在邊上有黑色條紋。調整視頻的大小取決於屏幕尺寸少用CSS

要優化加載時間，我想用更少的CSS，所以我想在更短的像這樣來定義價值做到這一點：

@videoHeight: '1080'; 
@videoWidth: '2048'; 

@alphaVideo: '1,9'; 

@winHeight:'$(window).height()'; 
@winWidth:'$(window).width()'; 


@alphaWin: @winHeight/@winWidth; 



@media only screen and (min-width: @alphaVideo * @winHeight) { 
    #video-background { 
    transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    } 
}

，但我得到了下面的錯誤在我的瀏覽器： OperationError：無效類型在無效行0，列0上的操作：

1 @ videoWidth：'2048';

我該如何解決這個問題？

感謝

來源

2013-11-20 Spearfisher

使用JS的替代方法：http://stackoverflow.com/questions/18090595/center-fullscreen-background-video/18091239#18091239 – gvee

可能重複的[創建div平方，並相應地居中使用視圖端口使用較少]（http://stackoverflow.com/questions/17983241/create-a-div-square-and-center-it-accordingly-the-view-port-using-less） – cimmanon

LESS是CSS 預處理，這意味着它被設計即使是意識到之前處理瀏覽器環境。當LESS編譯服務器端時（這是推薦的），這是絕對正確的。如果LESS是編譯客戶端的話，您可以意識到瀏覽器本身（比如窗口大小）（不推薦，因爲它與您聲明的相反，「優化加載時間」）。

所以總結：你不能同時優化加載時間和較少注意實際的瀏覽器大小的。

來源

2013-11-20 13:34:56 ScottS

雖然這是真的，但它並沒有解決編譯錯誤問題。 – cimmanon

@cimmanon：也許吧。但是，在他的代碼中，他甚至不會在你引用的字符串上顯示「操作」。該操作正在完成一個'@ winHeight'和'@ winWidth'變量，這可能有以下兩方面的問題：（1）沒有被回刻錄包圍的JavaScript;（2）如果運行服務器端，則不會產生任何值。 – ScottS

謝謝，這是非常有意義的 - 我很少新的css ^^ 你會建議什麼來優化此視頻的加載時間？這個想法是僅當窗口大小接近我的視頻分辨率時才顯示視頻 – Spearfisher

的問題是，你要在一個字符串進行數學運算（除法，乘法）。 LESS可以用字符串做的唯一事情就是連接它們。引用變量使得它一個字符串，所以不要那麼做，除非你真的想要一個字符串：

@videoHeight: 1080; 
@videoWidth: 2048;

來源

2013-11-20 13:34:25 cimmanon

你也說得很好。 OP可能需要內聯javascript的後退標記，而不是單引號。 – ScottS

調整視頻的大小取決於屏幕尺寸少用CSS

回答

相關問題