遊戲iframe響應

-1

我想讓我的iframe響應。遊戲iframe響應

以下是我的代碼

.game_frame iframe { 
 
    display: block; 
 
    margin: auto; 
 
}

<div class="col-md-12"> 
 
\t <div class="game_frame"> 
 
\t  <iframe src="http://www.freeonlinegames.com/embed/142842" width="800" height="400" frameborder="no" scrolling="no"></iframe> 
 
\t </div> 
 
</div>

即使我改變了這種

<div class="col-md-12">

太

<div class="embed-responsive embed-responsive-16by9 col-md-12 text-center">

BU仍然面臨問題，我的iframe不在中心。我不想使用全寬度的iframe，我想

WIDTH = 「800」 HEIGHT = 「400」

編輯： - Iframe on Dextop site，Iframe on Mobile site

來源

2017-09-03 samparker025

你能澄清你了響應是什麼意思？ – Retr0id

關於dextop遊戲iframe是完美的[快照]（http://i.imgur.com/HYf6XRk.png），但在移動gamign iframe沒有顯示100％。只有一半顯示[快照]（http://i.imgur.com/377xD9A.png） – samparker025

引導不具備2：1比例（適用於您的800x400示例）響應式嵌入式實用程序;你必須一類添加到您的CSS和HTML：

.embed-responsive-2by1::before { 
    padding-top: 50%; 
}

編輯：

我不能在我試過不管出於什麼原因任何瀏覽器正確加載http://www.freeonlinegames.com/embed/142842，但在以下代碼應該工作;剛剛與iframe替換虛擬img：https://codepen.io/pixleight/pen/KvEWRJ/

.embed-responsive-2by1::before { 
 
    padding-top: 50%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="embed-responsive embed-responsive-2by1"> 
 
    <img src="//dummyimage.com/800x400" class="embed-responsive-item" /> 
 
    </div> 
 
</div>

來源

2017-09-03 18:49:51 pixleight

我試過這段代碼，但它不工作:( – samparker025

嘗試刪除iframe上定義的寬度和高度。當我在一臺電腦上而不是在我的手機上時，我會更仔細地查看。 – pixleight

@ samparker025我不知道你在使用什麼瀏覽器，但我無法正確加載'http：//www.freeonlinegames。 com/embed/142842'在我試過的任何瀏覽器中使用虛擬圖像代替iframe擴展我的答案。 – pixleight

遊戲iframe響應

回答

相關問題