.video_wrapper
 .video_inner
  .video_show
  .video_control
   .item.channel-i
    span
   .item.item-title
    span.title1
    span.title2
 .video_inner
  .video_show
  .video_control
   .item.channel-i
    span
   .item.item-title
    span.title1
    span.title2
 .video_inner
  .video_show
  .video_control
   .item.channel-i
    span
   .item.item-title
    span.title1
    span.title2
 .video_inner
  .video_show
  .video_control
   .item.channel-i
    span
   .item.item-title
    span.title1
    span.title2   
View Compiled
$sm-600:"(max-width: 600px)";

.video_wrapper{
  width: 90%;
  margin: 10px auto;
  background: #FAFAFA;
  overflow: hidden;
}
$inner-bg: #CCCCCC;
$control-bg: #E3E3E3;

.video_inner{
  width: 230px;
  @media #{$sm-600}{
    width: 80%;
    float: none;
  }
  
  float: left;
  padding: 8px;
  margin: 0 auto;

  
  .video_show{
    height: 130px;
    background: $inner-bg;
  }
  .video_control{
    margin-top: 5px;
    display: flex;
    .channel-i {
      span{
        width: 40px;
        height: 40px;
        display: inline-block;
        background: $control-bg;
        border-radius: 50%;
      }
    }
    .item-title{
      flex: 1;
      margin-left: 7px;
      span{
        display: inline-block;
        height: 15px;
        background: $control-bg;
                  margin-top: 2px;

        &.title1{
          width: 90%;
        }
        &.title2{
          width: 70%;
        }
      }
      
    }
    
  }
  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.