Embedding YouTube Video

Embedding Youtube video can be an annoying experience because the standard youtube embedding function from the blogger.com's content editor  creates a set of HTML codes that is not responsive and probably a set of height an width creating a 4x3 aspect ratio.

Fortunately this template has a css style created just for modifying the Youtube embedding html code fluid and responsive. Just include the video-container css class in a containing div wrapper, it will then makes the embedded youtube video responsive and fluid that takes up 100% of the width of the post. If we like the video to be smaller than 100%, we can also use another div wrapper with say 80% of the width to contain the maximum size of the video.

<div class='w-75 mx-auto'>

    <div class='video-container'>

        <iframe>....youtube embedding code from youtube's sharing option..</iframe>

    </div>

</div>

In the html coding above, we uses the Bootstrap built-in css style w-75 to limit the width to 75% of the containing html element's width and use mx-auto, which means margin:auto, to set the video to horizontally align.