YouTube 视频响应章节停止答案

【问题标题】：YouTube Video Responsive with Chapter StopsYouTube 视频响应章节停止
【发布时间】：2016-02-23 08:56:02
【问题描述】：

我需要将一堆带有 Chapter Stops 的 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>

【问题讨论】：

我认为您为 youtube 视频显示的响应代码无法正常工作。

标签： javascript php video responsive-design youtube

【解决方案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;   
     }
}

【讨论】：