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>

但由于这包含章节停止，我不知道从哪里开始，如何使用代码ABOVE代码BELOW使视频和章节停止响应？

这是我的代码。

<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。

  <bindings>
  <basicHttpBinding>
    <binding name="MaxbasicHttpBinding" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647">
      <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647"/>
      <security mode="None"/>
    </binding>
  </basicHttpBinding>
</bindings>

YouTube视频响应章节停止

1 个答案: