Making a card with HTML and CSS ( YouTube Clone - part 5)

Welcome to this lesson. In this lesson, we will add videos to the content area.

You need to duplicate video (not videos) into many places to make it look like real youtube and you can edit them with unique Youtube information if available.

<div class="videos">
  <!-- a video starts -->
    <div class="video">
       <div class="thumbnail">
          <img src="https://img.youtube.com/vi/zUwB_imVjmg/maxresdefault.jpg" alt="" />
        </div>

          <div class="details">
             <div class="author">
                <img src="https://yt3.ggpht.com/bpzY-S4DYlbTeOpY5hIA7qz_hcbMkgvLAugtwKBGTTImNnWAGudX0y53bo_fJZ0auypxrWkUiw=s88-c-k-c0x00ffffff-no-rj" alt="" />
             </div>
             <div class="title">
                <h3>
                    Introverts & Content Creation | Sumudu Siriwardana
                 </h3>
                 <a href="">
                        Francesco Ciulla
                  </a>
                  <span> 2M Views • 3 Months Ago </span>
             </div>
           </div>

         </div>
   <!-- a video Ends -->
 </div>

Now, let apply CSS to it.

.content {
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  padding: 15px 15px;
  border-top: 1px solid #ddd;
  overflow-y: scroll;
}

.videos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.video {
  width: 270px;
  margin-bottom: 30px;
}

If you check the style for “.videos”, you will see “flex-wrap” and it is the only property I have not explained before, so let’s explain it. When the screen can only take four items, for example, other items, if they are more than four, we be move to another row. That is what “flex-wrap” does.

.thumbnail {
  width: 100%;
  height: 170px;
}

.thumbnail img {
  object-fit: cover;
  height: 94%;
  width: 100%;
}
.author img {
  object-fit: cover;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-right: 10px;
}

The only thing you may not understand above because we haven’t explained it before is “object-fit: cover”. Then how do we use it. "object-fit" in this case is used to clip the image to its container so as to remove overflow (areas where the image is bigger than its container) in height and width;

.details {
  display: flex;
}

.title {
  display: flex;
  flex-direction: column;
}

.title h3 {
  color: rgb(3, 3, 3);
  line-height: 18px;
  font-size: 14px;
  margin-bottom: 6px;
}

.title a,
span {
  text-decoration: none;
  color: rgb(96, 96, 96);
  font-size: 12px;
}

In this case , we make a layout out of “.details” and because we don’t set its flex-direction to property, it will be set to “row” which is its default value. You see that a layout is also made out of the title and set it children to appear in column by setting flex-direction to column.

We select the h3 tag that is inside “.title” and we set it color to somewhat black…I will explain how to understand the color code later. "line-height" is used to set the height of a line of text and in this case, we set it to 18px.

Finally we use “.title a, span” to select the anchor tag in “.title” and also select all span tags on the page and set their text-decoration to none. So what is text decoration? It has a design such as an underline that an anchor tag has and we hide it in this case by setting it to none.

We are done with this part and the tutorial is now complete.

We will make it more responsive in the next lesson. See you soon!