如何在帶有溢出的div盒中隱藏視頻結尾：隱藏？

我想隱藏視頻>（更大的尺寸）div-box的末端，就像使用overflow：hidden（並且不丟失視頻比例）的圖像一樣。該代碼我使用：如何在帶有溢出的div盒中隱藏視頻結尾：隱藏？

CSS3

#cookVideo { /*Video Box*/ 
display: inline; 
position: relative; 
background-clip:border-box; 
float: left; 
z-index: 2; 
min-width: 50%; 
max-width: 50%; 
min-height: 400px; 
height: 400px; 
width: 50%; 
margin-top: -8px; 
padding: 0px; 
} 

#dynamic {/* Container - Zoom Image and Cooking Video*/ 

position: relative; 
top: 0px; 
margin-left: -11px; 
display: block; 
float: left; 
width: 100%; 
height: 382px; 
overflow: hidden; 
/*border: 1px solid green;*/ 
}

HTML部分

<section id="midContainer"> 
    <article> 
    <header id="dynamic"> 
     <video id="cookVideo" autoplay loop> 
      <source src="css/images/Shrimpsmall.mp4"> 
     </video> 
    </header> 
    </article> 
</section>

來源

2016-03-19 Vishnu Vijai

www.foodcakey.xyz幫助請幫忙 –

「隱藏視頻的末尾」是什麼意思？你的意思是*在視頻元素的頂部放置覆蓋層（如電視機箱），以便視頻元素的邊緣隱藏在覆蓋層下面？ – gibberish

是的，我想這樣做。 –

這將是最好的，如果你希望它是響應或使用百分比，以使用插件。這裏是一個使用Vide

視頻被包裹在另一個div中，當插件被調用時，它會延伸視頻以覆蓋包裝類，就像background-size：cover的工作方式。

$('#cookVideo').vide();

#dynamic { 
 
    position: relative; 
 
    top: 0px; 
 
    margin-left: -11px; 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    height: 382px; 
 
    overflow: hidden; 
 
    /* border: 1px solid green; */ 
 
} 
 

 

 
#cookVideo-wrapper { 
 
    display: inline; 
 
    position: relative; 
 
    background-clip: border-box; 
 
    float: left; 
 
    z-index: 2; 
 
    height: 400px; 
 
    width: 50%; 
 
    margin-top: -8px; 
 
    padding: 0px; 
 
    overflow:hidden; 
 
} 
 

 

 
#zoomImage { 
 
    display: inline; 
 
    position: relative; 
 
    float: left; 
 
    background: url("http://s3-ap-northeast-1.amazonaws.com/foodncake/css/images/Choco.jpg") center center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-origin: content-box; 
 
    height: 400px; 
 
    width: 50%; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script> 
 

 
    <header id="dynamic"> 
 
     <div id="zoomImage"> </div> 
 
     <div id="cookVideo-wrapper"> 
 
      <video id="cookVideo" autoplay="" loop=""> 
 
      <source src="http://s3-ap-northeast-1.amazonaws.com/foodncake/css/images/Shrimpsmall.mp4">   
 
      </video> 
 
     </div> 
 
     </header>

來源

2016-03-19 16:56:50 Miro

謝謝你，我會試試這個。 –

如果你想要做手工，這裏有幾點：

jsFiddle Demo

（1）頭（#dynamic）是外部div容器，樣式爲position:relative。 這是必要的，因爲內的DIV不能樣式position:absolute除非它們的父DIV是風格或者absolute或relative

（2）兩個#cookvideo和#olay（重疊）是首標內，並且風格position:absolute。

（3）覆蓋DIV應具有background-color:transparent並使用粗邊框的框架，OR使用背景圖像（具有透明中間PNG）作爲一個更復雜的幀。（4）因爲瀏覽器樣式表（每個瀏覽器的一部分，不是瀏覽器的標準）對video元素做一些基本的樣式，所以正確定位框架可能會很棘手。您可能必須重寫該默認樣式。

來源

2016-03-19 17:38:56 gibberish

如何在帶有溢出的div盒中隱藏視頻結尾：隱藏？

回答

相關問題