css - 如何在我的第一个网站上嵌入视频

Question

我正在为我的主页创建类似网格的文章和视频布局。我希望所有框的尺寸都相同，包括视频框，但我对将 YouTube 视频添加到我的网站有一些疑问。

问题 0:我认为 HTML 5 支持视频，但我正在考虑嵌入 YouTube 视频，因为我的大部分视频都来自 YouTube，而我认为 HTML5 视频支持得不够好？我应该考虑 HTML5 视频吗？

问题 1:考虑 YouTube 视频，如何将 YouTube 视频添加到我的 HTML 和 CSS 中？

问题 2:如何确保视频适合我的标记，而不是变小或变大。

问题 3:我如何确保用户也可以访问 YouTube 提供的相同视频控件，例如全屏、播放等......

我也会听取有关我的 HTML 和 CSS 的任何建议。

这是我网站的文章和视频等网格的 HTML:

     <div class="modules-container">

            <h3 id="on-god">On God</h3>

            <div class="row clear-fix">
                <section class="article-module">
                    <header>
                        <h4>
                            Article Name
                        </h4>
                    </header>
                    <blockquote cite="articles/name">
                        <p>
                            <em>My example quote will go here</em>
                        </p>
                    </blockquote>
                    <footer class="article-module-footer">
                        <a href="#">Read More</a>
                    </footer>
                </section><!-- end .article-module -->

                <section class="article-module middle">
                    <header>
                        <h4>
                            Article Name
                        </h4>
                    </header>
                    <blockquote cite="articles/name">
                        <p>
                            <em>My example quote will go here</em>
                        </p>
                    </blockquote>
                    <footer class="article-module-footer">
                        <a href="#">Read More</a>
                    </footer>
                </section><!-- end .article-module -->

                <section class="article-module">
                    <header>
                        <h4>
                            Article Name
                        </h4>
                    </header>
                    <blockquote cite="articles/name">
                        <p>
                            <em>My example quote will go here</em>
                        </p>
                    </blockquote>
                    <footer class="article-module-footer">
                        <a href="#">Read More</a>
                    </footer>
                </section><!-- end .article-module -->
            </div><!-- end .row -->



            <hr>

            <h3 id="videos">Videos</h3>

            <div class="row clear-fix">
                <section class="video-module">
                    <h4>
                        Name of video
                    </h4>
                    <p>
                        My embeded video will go here
                    </p>
                </section><!-- end .video-module -->
                <section class="video-module">
                    <h4>
                        Name of video
                    </h4>
                    <p>
                        My embeded video will go here
                    </p>
                </section><!-- end .video-module -->
                <section class="video-module">
                    <h4>
                        Name of video
                    </h4>
                    <p>
                        My embeded video will go here
                    </p>
                </section><!-- end .video-module -->

            </div><!-- end .moduels-container -->
        </div>

到目前为止，还有我的 CSS。我应该注意到我在另一个文件中使用 normalize.css。

     /* 
Author: David Espejo
    */

     /* rem is base off of root font size */

   /* 
Padding and borders are
included in the width
of all elements
    */
    *, *:before, *:after {
        -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
     }

    /* Small screens (default) */
     html { font-size: 100%; } /* root font size 16px */

    /* Medium screens (640px) */
    @media (min-width: 40rem) { 
      html { font-size: 112%; } /* root font size 17.92px */
    }

    /* Large screens (1024px) */
    @media (min-width: 64rem) { 
        html { font-size: 120%; } /* root font size 19.2px */
       .article-module, .video-module {
     float: left;
     width: 30%;
     padding: 0.3rem 0.5rem;
     }
      .article-module.middle, .video-module.middle { margin: 0 5%;  }
     }



    .container {
  margin: 0 auto;
  max-width: 48rem; /* not > (48 * 19.2 = 921.6px)! */
  width: 90%; /* when < 921.6px */
    }

    .row { border: 1px solid blue; }
    .article-module, .video-module { border: 1px solid red; }


    .clear-fix:after {
   content: " ";
   display: block;
   clear: left;
     }

Answer 1

回答 0:我建议使用嵌入式视频，因为您主要使用的是 youtube 视频。这样您就不必担心视频的控件。

答案 1:您可以使用 youtube 提供的嵌入代码并将其放在 HTML 中您想要的任何位置。

<iframe width="560" height="315" src="//www.youtube.com/embed/PKa6XdWat2s" frameborder="0" allowfullscreen></iframe>

在你的情况下，这个 iframe 标签会出现在你提到“我的嵌入视频会出现在这里”的任何地方

我还建议使用 div 标签而不是 p 来包含视频。据我所知，p 标签用于文本段落。

答案 2:您可以通过控制样式表中 iframe 标记的宽度和高度来确保视频适合您的网格。

像这样。

.iframe {
  width:100%;
  height:100%;
}

通过这样做，视频大小将是包含的 div 的大小。

答案 3:正如我上面提到的，控件应该已经为您准备好了。

fiddle 链接:http://jsfiddle.net/6vh2t/1/