Div iframe實時視頻錄製

這是我的HTML。我正試圖在錄像機iframe上覆蓋一個紅色的小號div。Div iframe實時視頻錄製

<div style="overflow: hidden; 
      margin: 15px auto; 
      max-width: 480px; 
      height: 350px; 
      float: right; 
      top: -316px; 
      position: relative; 
      left: -50px; 
     /* margin-right: 100px; */ 
      vertical-align: top; 
      display: inline-block; 
      border: solid 2px black; 
      background: none;"> 

    <iframe style="position: relative; 
        margin-left: -185px; 
        height: 1000px; 
        margin-top: -230px; 
        width: 850px;" scrolling="no" src="http://www.red5-recorder.com/demo.php"> 
    </iframe> 

    <div id="red" style="border: 2px red solid; 
         z-index: 999; 
         position: absolute; 
         width: 290px; 
         height: 180px; 
         float: right; 
         margin-right: 160px; 
         margin-top: 100px;"></div> 

</div>

有人可以幫我嗎？

來源

2014-09-27 tabia

也許在你的HTML CSS的評論：'/ * ... * /' – Luke 2014-09-27 18:08:01

是http://jsfiddle.net/lalu050/o5pj6g2k/你想？？？ – Lal 2014-09-27 18:31:09

@Lal謝謝:)它工作！ – tabia 2014-09-27 18:33:32

您需要的包裝設置產地爲絕對定位的元素：

<div style="position:relative"> 
<iframe scrolling="no" src="http://www.red5-recorder.com/demo.php" style=" position:relative;       margin-left: -185px; height:1000px; margin-top: -230px; width: 850px;"> 
    </iframe> 
    <div id="red" style="border: 2px red solid; z-index:999; position:absolute;width:290px; height:180px;top:0;left:0"></div> 
</div>

而且，你不絕對定位的元素使用float:。您還需要指定位置top:或bottom:和left:或right:

來源

2014-09-27 18:08:33

它的工作..但現在我無法點擊iframe中的按鈕.. – tabia 2014-09-27 18:26:05

現在這個工作！謝謝 – tabia 2014-09-27 18:33:59

Div iframe實時視頻錄製

回答

相關問題