Course 1 Lesson 2

 Course 1 Lesson 2 Body

This post relies on Theme → Customize → Advanced → Add CSS having the following code (which I added before editing this post with following changes):

/* YouTube Video Container for resizing width to take up full content width */

.dravilms-video-container {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

  width: 100%;

  margin: 0 auto;

}

.dravilms-video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

----- end Add CSS theme code extract ---

Then this post has following code (may not be latest version) in HTML, for video at the top of the post and thumbnail of that video being shown in blog site posts list:

<img src="https://img.youtube.com/vi/Ag1AKIl_2GM/maxresdefault.jpg" style="display: none;" />

<div class="dravilms-video-container">

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="auto" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Ag1AKIl_2GM" title="Free software, free society: Richard Stallman at TEDxGeneva 2014" width="100%"></iframe>

</div>

----- end post HTML code for YT video ---