JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<ul>
	<li class="dnlv-colorbox" data-ytvideoid="5eVoHqeyLlE" data-ytstarttime="0" data-ytendtime="40" data-ytplayerwidth="640" data-ytplayerheight="360" title="Intro">
        Intro
        <span class="dnlv-comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem labore ullam quidem dignissimos amet commodi aliquam. Necessitatibus culpa blanditiis ullam earum. Perferendis culpa tempore earum magnam molestiae similique a ad suscipit rem quasi ipsum nulla libero tenetur aliquam ab accusamus sapiente dicta qui voluptate totam eligendi vitae harum numquam amet quod perspiciatis animi aut deleniti hic consectetur in esse odio quia reprehenderit cumque facilis eos quibusdam! Blanditiis sed unde inventore alias ipsa laudantium accusantium nostrum neque molestiae repellendus sunt modi rerum nam officiis distinctio facilis atque cumque similique obcaecati eius iste quaerat illo laborum. Doloremque pariatur quisquam accusantium odit beatae.</span>
    </li>
	<li class="dnlv-colorbox" data-ytvideoid="5eVoHqeyLlE" data-ytstarttime="40" data-ytendtime="84" data-ytplayerwidth="640" data-ytplayerheight="360" title="#10 Bette Davis vs. Joan Crawford">
		#10 Bette Davis vs. Joan Crawford
		<span class="dnlv-comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, explicabo!</span>
	</li>
	<li class="dnlv-colorbox" data-ytvideoid="5eVoHqeyLlE" data-ytstarttime="84" data-ytendtime="130" data-ytplayerwidth="640" data-ytplayerheight="360" title="#9 Beyonce vs. Ali Larter">
		#9 Beyonce vs. Ali Larter
		<span class="dnlv-comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, explicabo!</span>
	</li>
	<li class="dnlv-colorbox" data-ytvideoid="5eVoHqeyLlE" data-ytstarttime="130" data-ytendtime="180" data-ytplayerwidth="640" data-ytplayerheight="360" title="#8 Bridget Fonda vs. Jennifer Jason Leigh">
		#8 Bridget Fonda vs. Jennifer Jason Leigh
		<span class="dnlv-comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis,...

CSS

/* Ctrl+C => Ctrl+V start */
/* Source: http://www.jacklmoore.com/colorbox/example3/colorbox.css */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;...

JavaScript

$().ready(function(){
    
    $(".dnlv-colorbox").colorbox({
        html:'<div id="ytShownotesWrapper"><div id="ytShownotesPlayer"></div></div><div class="dnlv-colorbox__comment"></div>',
        onComplete: function(){
            $().ytShownotes('addPlayer',{
                ytPlayer: {
                    wrapper: 'ytShownotesWrapper',
                    place: 'ytShownotesPlayer'
                },
                ytVideo: {
                    videoID: $(this).data('ytvideoid'),
                    startTime: $(this).data('ytstarttime'),
                    endTime: $(this).data('ytendtime'),
                    playerWidth: '640',
                    playerHeight: '360',
                    caption: '',
                }
            });
            $('.dnlv-colorbox__comment').html($(this).children('.dnlv-comment').html());
            $('#colorbox').css('height',$('#cboxWrapper').height() + 'px');
            if($('#cboxWrapper').height() > $(window).height()) {
                $('#colorbox').css('top','0px');
            }
        }
    });
    
    $(window).resize(function(){
        setTimeout(function(){
            $('#colorbox').css('height',$('#cboxWrapper').height() + 'px');
            if($('#cboxWrapper').height() > $(window).height()) {
                $('#colorbox').css('top','0px');
            }
        },1000);
    });
});