How to embed video on my first website

Question

I am creating a grid like layout of articles and videos for my home page. I want all boxes to be the same dimensions including the video ones, but i have some questions about adding youtube videos to my site.

question 0: I herd HTML 5 supports video but I am considering embedding YouTube videos as most of my videos are from YouTube and I herd that HTML5 video isnt supported well enough? Should I consider HTML5 video?

question 1: Considering YouTube videos, how do I add YouTube videos into my HTML and CSS?

question 2: How can I make sure that the video fits inside my markup and not any smaller or bigger.

question 3: How can I also make sure that the user can have access to the same video controls thar YouTube provides, eg fullscreen, play, ect.....

I will also take any advice on my HTML and CSS.

Heres the HTML for the grid like articles and videos for my site:

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

And my CSS thus far. I should note Im using normalize.css in another 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;
     }

Answer 1

Answer 0: I would suggest to go with embedded videos since you are mostly using youtube videos. That way you wont have to worry about the controls for the video.

Answer 1: You can take the embed code provided by the youtube and drop it anywhere you want to in your HTML.

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

In your case this iframe tag would go wherever you have mentioned "My embeded video will go here"

I would also suggest using a div tag instead of p to contain the videos. As far as I know p tag is used for paragraphs of text.

Answer 2: You can make sure the video fits inside your grid by controlling the width and height of the iframe tag from the stylesheet.

Something like this.

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

By doing this the video size will be the size of the containing div.

Answer 3: As I mentioned above the controls should already be there for you.

fiddle link : http://jsfiddle.net/6vh2t/1/

Answer 2

For youtube videos you can insert them as an iframe, like this:

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

Where src is the source of the video, also you can customize the width and height.

Answer 3

Your HTML looks pretty good. I'd maybe use <article> rather than <section>, that seems to be more appropriate.

You can get the embed code for any video by clicking share then embed. Youtube used to use <object> but now it seems to be <iframe>, e.g.

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

You can set the width and height (in pixels). Check the documentation to see about controls.

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

Good luck. Cheers!