YouTube 视频响应章节停止

Question

我需要将一堆带有 Chapter Stops 的 YouTube 视频（如上面的 link）放入响应式网站并使其响应式。

我知道如何使用以下代码使 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;   
     }
}

YouTube 视频响应章节停止

YouTube Video Responsive with Chapter Stops

javascript

php

youtube

video

responsive-design