如何添加一個響應式遊戲到我的網站？

Question

我想從http://www.miniclip.com/webmasters/8-ball-pool-multiplayer/en/插入任何遊戲到我的網站，但是當我做，並嘗試使屏幕變小沒有響應。有什麼辦法可以用bootstrap或其他東西來做到嗎？

Answer 1

首先，選擇您發送的鏈接的全寬！

我已經創建了一個例子here

.container { 
 
    background: #e3e3e3; 
 
    margin-bottom: 20px; 
 
    padding-bottom: 50px; 
 
} 
 
h1, h4 { 
 
    text-align: center; 
 
    margin-bottom: 50px; 
 
} 
 
h1 i { 
 
    color: pink; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h1>Bootstrap 3 Responsive video Embeds <i class="fa fa-heart"></i></h1> 
 
<h4>Check out more <a href="http://panayiotisgeorgiou.net">www.panayiotisgeorgiou.net</a> for more awesome web dev things</h4> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 

 
     <h2>16:9 Responsive Aspect Ratio</h2> 
 
     <div class="embed-responsive embed-responsive-16by9"> 
 
     <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/JYv7Ibml4ro"></iframe> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 

 

 
     <h2>4:3 Responsive Aspect Ratio</h2> 
 
     <div class="embed-responsive embed-responsive-4by3"> 
 
     <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/JYv7Ibml4ro"></iframe> 
 
     </div> 
 
    </div> 
 
    <h2>Miniclip Embed</h2> 
 
    <!-- Place this code where you'd like the game to appear --> 
 
<div class="miniclip-game-embed" data-game-name="8-ball-pool-multiplayer" data-theme="0" data-width="100%" data-height="560" data-language="en"><a href="http://www.miniclip.com/games/8-ball-pool-multiplayer/">Play 8 Ball Pool</a></div> 
 
<p style="text-align:center;"><a href="http://www.miniclip.com/games/8-ball-pool-multiplayer/" target="_blank">Play 8 Ball Pool</a>/More <a href="http://www.miniclip.com/games/genre-3/" target="_blank">Sports games</a></p> 
 

 
<!-- Insert this code before your </body> tag --> 
 
<script src="//static.miniclipcdn.com/js/game-embed.js"></script> 
 
    </div> 
 
</div>

，看看，讓我知道。