Vimeo全寬

Question

我想在網頁中顯示一個vimeo視頻全寬。

這是現在的樣子：

正如你可以看到黑色的全寬，但沒有視頻。它應該是全寬，不顯示控件，自動播放並循環播放。

我的代碼看起來像現在這樣：

<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

客戶端有VIMEO再加但不Vimeo的親。有人可以幫我弄這個嗎。

UPDATE：

我已經改變了我的代碼如下：

<style> 
    .embed-container { 
     position: relative; 
     padding-bottom: 56.25%; 
     height: 0; overflow: hidden; 
     max-width: 100%; height: auto; 
    } 
    .embed-container iframe, .embed-container object, .embed-container embed { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 
</style> 

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> 

但我仍然有底部和頂部的黑色邊框。

我已經創建了一個的jsfiddle，你也可以看到這一點：https://jsfiddle.net/07fkfwz3/。而你可以看到的視頻here沒有任何邊框。

Answer 1

你用於容器創建的魔填補數需要匹配視頻的縱橫比。如果你檢查視頻Vimeo，水庫是1296x540。要獲得縱橫比百分比，請除以540/1296 = 41.66666667％填充。這是一個小提琴，因爲視頻在SO沙盒中看起來不太好。https://jsfiddle.net/07fkfwz3/6/

.embed-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    overflow: hidden; 
 
} 
 
\t \t 
 
.embed-container iframe, 
 
.embed-container object, 
 
.embed-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class='embed-container'> 
 
    <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
 
</div>

Answer 2

後，我看到了我設法解決您的問題，像這樣的小提琴試試這個

<style> 
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
</style> 

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> 

編輯

所以：

CSS

 .embed-container { 
     position: relative; 
     padding-bottom: 56.25%; 

     height: 0; 
     overflow: hidden; 
     max-width: 100%; 
     height: auto; 
    } 

    .embed-container iframe, 
    .embed-container object, 
    .embed-container embed { 
     position: absolute; 
     top: 13%; 
     width: 100%; 
     height: 75%; 
    } 

HTML

<div class='embed-container'> 
    <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

Answer 3

你可以試試這個： https://jsfiddle.net/c4j73z16/4/

HTML

<div class='embed-container'> 
    <div class="vcontent"> 
    <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&title=0&byline=1&portrait=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    </div> 
</div> 

CSS

<style> 
    .embed-container { 
    position: relative; 
    padding-bottom: calc(70vh - 6.7em); 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    } 

    .embed-container .vcontent { 
    position: absolute; 
    overflow: hidden; 
    height: calc(70vh - 6.2em); 
    width: 100%; 
    margin-top: -0.5em; 
    } 

    .embed-container iframe, 
    .embed-container object, 
    .embed-container embed { 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 70vh; 
    padding: 0; 
    margin: -3em 0; 
    } 
</style> 

我用vh的高度，進一步div.vcontent，妥善轉移到你所需要的更好的匹配。

Answer 4

HTML是

<div class='container'> 
    <div class="vcontent"> 
    <iframe src="https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    </div> 
</div> 

和在造型

.container { 
     position: relative; 
     padding-bottom: calc(70vh - 6.7em); 
     height: 0; 
     overflow: hidden; 
     max-width: 100%; 

    } 
    .container .vcontent { 
     position: absolute; 
    overflow: hidden; 
    height: calc(70vh - 6.2em); 
    width: 100%; 
    margin-top: -0.5em; 
    } 
    .container iframe, 
    .container object, 
    .container embed { 
     position: absolute; 
    overflow: hidden; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 70vh; 
    padding: 0; 
    margin: -3em 0; 
    }