iframe播放器及其頂部的橫幅

您好我想讓橫幅出現在iframe播放器上。就像這樣：http://i.imgur.com/nbcSVPP.png當然有一個關閉按鈕。我的HTML代碼是這樣的iframe播放器及其頂部的橫幅

<div id="content-embed" style="min-height: 500px;">     
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> 
    </iframe> 
</div>

CSS

#content-embed { 
    width: 100%; 
    position: relative; 
}

我至今嘗試過（對不起，我不是在CSS和HTML掌握）

<div id="content-embed" style="min-height: 500px;">     
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="z-index: 0;"> 
    </iframe> 
    <div style="z-index: 1;"><img src="/banner.jpg" /></div> 
</div>

來源

2017-07-16 buli

正是你嘗試過什麼，在哪裏是代碼的其餘部分（旗幟例如）？ –

我試圖在iframe中設置內容嵌入div的z索引，並製作另一個帶橫幅的div。我編輯了第一篇文章。 – buli

[堆積對彼此頂部的DIV？]（https://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other） – Makyen

您需要在iframe的包裝中使用position: relative和圖像，然後在圖像中使用position: absolute以在元素中設置其位置，如下例所示：

https://jsfiddle.net/kLaj5gjj/

.relative-wrapper { 
 
    position: relative; 
 
} 
 

 
.iframe { 
 
    /* simulating iframe */ 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: black; 
 
} 
 

 
.banner { 
 
    /* banner positioning */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 40%; 
 
} 
 

 
.some-image { 
 
    /* simulating image size */ 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: red; 
 
}

<div class="relative-wrapper"> 
 
    <!-- simulating iframe --> 
 
    <div class="iframe"></div> 
 
    
 
    <div class="banner"> 
 
    <!-- simulatin image --> 
 
    <img class="some-image" /> 
 
    </div> 
 
</div>

來源

2017-07-16 16:49:55

的可能的複製謝謝它的作品。現在我有另一個問題 - 橫幅是300x250像素，我該如何做出響應？因爲在桌面上它運行良好（但我必須定位一下，因爲它並不總是在中心），但是在移動設備上，橫幅超出了播放器的範圍 – buli

您可以使用屬性'max-width：100％ '，所以圖像不能從包裝中逃脫。另外，添加'height：auto'，這樣高度就會自動調整。 –

iframe播放器及其頂部的橫幅

回答

相關問題