JSFiddle - React, Tailwind, and code Playground

by Wang Carr

HTML

<div class="wrapper-content">
	<div id="primary-video">
		<iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/aVS4W7GZSq0" frameborder="0" allowfullscreen=""></iframe>
		<div class="primary-video-details-wrap">
			<div class="primary-videotitle"> Primary Video <i class="fa fa-check-square" aria-hidden="true"></i></div>
			<div class="primary-videodatepublished"> Published on May 27, 2016</div>
			<div class="primary_videodescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis risus id dolor fringilla, at feugiat risus placerat. Ut vulputate sagittis lectus, a ornare sapien interdum eu. Sed quis euismod dui. </div>
		</div>
	</div>
	<div id="video-list">
  </div>
</div>

CSS

.wrapper-content{
 width:90%;
 margin:auto;
}
#primary-video{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dadada;
}

.primary-videotitle{
    color: #000;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 4px;
}

.primary_videodescription{
    line-height: 15px;
    font-size: 12px;
    text-align: justify;
    border-top: 1px solid #dadada;
    margin-top: 10px;
    padding-top: 10px;
}

.primary-videodatepublished{
    font-size: 12px;
}
.video-title{
    color: #5da401;
    font-size: 14px;
    line-height: 16px;
}

.video-date{
    line-height: 28px;
    font-size: 12px;
}

.video-duration{
    position: relative;
    bottom: 30px;
    color: #fff;
    font-size: 11px;
    background: #000;
    padding: 2px;
    left: 55px;
}
.left-video-info{
    width: 38%;
    float: left;
}

.right-video-info{
    width: 60%;
    float: right;

}
.clear{
  clear:both;
}

 .video-list-wrapper{
 display:block;
}

JavaScript

var fakedatasource=[];
var fake1 = {
	video_youtube_link:'https://www.youtube.com/embed/kPDnw3_1GOI',
  video_youtube_thumbnail:'https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg',
  video_youtube_title:'Video 1',
  video_youtube_description:'This is Video1',
  video_youtube_duration:'05:26',
  video_youtube_date_published:'2 months ago',
}
var fake2 = {
	video_youtube_link:'https://www.youtube.com/embed/dRjE1JwdDLI',
  video_youtube_thumbnail:'https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg',
  video_youtube_title:'Video 2',
  video_youtube_description:'This is Video2',
  video_youtube_duration:'07:17',
  video_youtube_date_published:'2 months ago',
}
fakedatasource.push(fake1);
fakedatasource.push(fake2);


//-------------------------------------------------



var video_inf_array = [];
$.each(fakedatasource, function(i, row) {
  var video_link = row.video_youtube_link;
  var video_img = row.video_youtube_thumbnail;
  var video_title = row.video_youtube_title;
  var video_description = row.video_youtube_description;
  var video_duration = row.video_youtube_duration;
  var video_published = row.video_youtube_date_published;
  
  var str = "<div class='video-list-wrapper'>";
 
 var all_video_inf = {   // an object to carry one video's all information
    video_link : video_link,
    video_img : video_img ,
    video_title : video_title ,
    video_description : video_description ,
    video_duration :video_duration,
    video_published:video_published
  }
  video_inf_array.push(all_video_inf);
  
   str += "<div class='video-wrap'>";
   str += "<div class='left-video-info'><a href=#null><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+video_duration+"</span></div>";                 
   str += "<div class='right-video-info'>";
   str += "<div class='video-title'>"+video_title+"</div>";
   str += "<div class='video-date'>"+ video_published +" ago</div>";
   str += "</div>";//right-info 
   str += "</div>";//video-wrap
   str +=...