YouTube 视频响应章节停止

Posted 2023-03-13

【中文标题】YouTube 视频响应章节停止

【英文标题】：YouTube Video Responsive with Chapter Stops

【发布时间】：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   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 视频显示的响应代码无法正常工作。

【参考方案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;