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

时间:2014-04-29 18:10:31

标签: html css html5

我正在为我的主页创建一个类似于文章和视频布局的网格。我希望所有的盒子都是相同的尺寸,包括视频尺寸,但我对将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;
     }

3 个答案:

答案 0 :(得分:1)

你的HTML看起来很不错。我可能会使用<article>而不是<section>,这似乎更合适。

点击share然后点击embed即可获取任何视频的嵌入代码。 Youtube过去常常使用<object>,但现在似乎是<iframe>,例如

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

您可以设置宽度和高度(以像素为单位)。查看文档以查看控件。

https://developers.google.com/youtube/player_parameters

祝你好运。干杯!

答案 1 :(得分:1)

对于youtube视频,您可以将其作为iframe插入,如下所示:

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

如果src是视频的来源,您也可以自定义宽度和高度。

答案 2 :(得分: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 :正如我上面提到的,控件应该已经存在了。

小提琴链接:http://jsfiddle.net/6vh2t/1/