我正在为我的主页创建一个类似于文章和视频布局的网格。我希望所有的盒子都是相同的尺寸,包括视频尺寸,但我对将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;
}
答案 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>
您可以设置宽度和高度(以像素为单位)。查看文档以查看控件。
祝你好运。干杯!答案 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 :正如我上面提到的,控件应该已经存在了。