JSFiddle - React, Tailwind, and code Playground

by Christian Roque

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 class="video-list-wrapper">
			<div class="video-wrap">
				<div class="left-video-info"><a href="#null" onclick="document.getElementById('video').src='https://www.youtube.com/embed/kPDnw3_1GOI'" class=""><img src="https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg" width="100%" height="auto"></a><span class="video-duration">05:26</span></div>
				<div class="right-video-info">
					<div class="video-title">Video 1</div>
					<div class="video-date">2 months ago</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="video-list-wrapper">
			<div class="video-wrap">
				<div class="left-video-info"><a href="#null" onclick="document.getElementById('video').src='https://www.youtube.com/embed/dRjE1JwdDLI'"><img src="https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg" width="100%" height="auto"></a><span class="video-duration">07:17</span></div>
				<div class="right-video-info">
					<div class="video-title">Video 2</div>
					<div class="video-date">2 months ago</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
    
    
		</div>

	<div id="video-list">
		<div class="video-list-wrapper">
			<div class="video-wrap">
				<div class="left-video-info"><a href="#null"...

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 .video-list-wrapper{ display:none;
}

JavaScript

$(document).ready(function () {
var numvideo = $('.video-list-wrapper').length;
            var x = 4;
             
            
            $('.video-list-wrapper').slideUp("slow");
            $('.video-list-wrapper:lt('+x+')').slideDown("slow");
             
            $('#showless').prop('disabled', true);
        
                      
            $('#loadmore').click(function(){
                x = (x+4 <= numvideo) ? x+4 : numvideo;
                $('.video-list-wrapper:lt('+x+')').slideDown("slow");
                
                if(numvideo == x){//equal num of videos
                    $('#loadmore').prop('disabled', true);
                } 
                else if(x > 4)
                { 
                    $('#showless').prop('disabled', false);
                } 
            });
                
            $('#showless').click(function(){
                x = (x-4<0) ? 4 : x-4;
                $('.video-list-wrapper').not(':lt('+x+')').slideUp("slow");
                if(x <= 4){ 
                    $('#showless').prop('disabled', true);
                    $('#loadmore').prop('disabled', false);
                }
                else if(x != numvideo)
                { 
                    $('#loadmore').prop('disabled', false);
                }
            }); 

});