I am currently setting up a grid layout for articles and videos on my homepage. I want to ensure that all the boxes are of equal dimensions, including the ones containing videos. However, I have some queries regarding the integration of YouTube videos on my website.
Question 0: I've heard that HTML5 supports video, but considering most of my videos are from YouTube and the rumored lack of support for HTML5 video, should I go for embedding YouTube videos instead?
Question 1: In the case of YouTube videos, how can I add them to my HTML and CSS code?
Question 2: How do I ensure that the video fits perfectly within my markup without being either too small or too large?
Question 3: Additionally, how can I provide users with access to the same video controls offered by YouTube such as fullscreen, play, etc.?
I would greatly appreciate any advice on optimizing my HTML and CSS structure.
Here's the HTML snippet for the grid layout featuring articles and videos:
<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 embedded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embedded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embedded video will go here
</p>
</section><!-- end .video-module -->
</div><!-- end .moduels-container -->
</div>
Below is the CSS I've worked on so far. Please note that I'm utilizing normalize.css in a separate file.
/*
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;
}