YouTube視頻響應章節停止

Question

我需要將章節停止的一堆YouTube視頻（如上面的鏈接）放入響應式網站並使其響應。

我知道如何使用下面的代碼製作YouTube視頻。

<style type="text/css"> 
.video-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; height: 0; overflow: hidden; 
} 

.video-container iframe, 
.video-container object, 
.video-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
</style> 

<div class="video-container"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/o_Qc3XJJuyI" frameborder="0" allowfullscreen></iframe> 
</div> 

但由於這包含章停止我不知道從哪裏開始，我怎麼使用上面的代碼與下面的代碼，以使雙方的視頻和章節停止響應？

這是我的代碼。

<h1>A Closer Look at The Value of MRIs</h1> 

<!--CHAPTER VIDEO--> 
<link rel="stylesheet" href="http://mymsaa.org/chapters/chapter_marker_player3.css"> 
<script type="text/javascript" src="http://mymsaa.org/chapters/odd.js"></script> 
<script type="text/javascript" src="http://mymsaa.org/chapters/chapter_marker_player3.js"></script> 

<div id="iframe-session-player"></div> 

<script type="text/javascript"> 
ChapterMarkerPlayer.insert({ 
    container: 'iframe-session-player', 
    videoId: 'o_Qc3XJJuyI', 
    width: 560, 
// BEGIN_INCLUDE(define_chapters) 
    chapters: { 
    11: 'Introduction/Part 1. Getting an MRI', 
    700: 'Part 2. Learning from a Neurologist', 
    1782: 'Part 3. MSAAs MRI Programs', 

    } 
// END_INCLUDE(define_chapters) 
}); 
</script> 
<!--CHAPTER VIDEO--> 

<p>The use of magnetic resonance imaging (MRI) plays an important role in diagnosing multiple sclerosis, tracking disease progression, and evaluating the effectiveness of prescribed therapy. This three-part program features interviews with an MS patient describing her experience undergoing an MRI exam, a noted neurologist explaining the value of an MRI, and a representative of MSAA discussing the organization's two MRI financial assistance programs.</p> 

Answer 1

Here's a jsFiddle。

希望這會有助於引導您進入正確的響應方向。

將所有內容包裝在您希望作出響應的容器中，並將該容器中的所有內容寬度設置爲100％，然後在需要時通過媒體查詢對容器的iframe進行調整。

.responsive{ 
    width:80%; 
    margin:0px auto; 
} 

.responsive iframe { 
    height:300px; 
} 
@media(min-width:768px){ 
    .responsive iframe { 
     height:450px; 
    } 
} 
@media(min-width:992px){ 
    .responsive iframe{ 
     height:550px; 
    } 
} 
@media(min-width:1200px){ 
    .responsive iframe { 
     height:660px; 
    } 
}