JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div class="full"> 
	<a id="one" href="#"><img src="http://angelaandtom.co.uk/lib/images/1-1.jpg"></a>
</div>

<div class="full">
	<a id="two" href="#">
		<video id="myvideo1" poster="lib/images/2-2.jpg">
  			<source src="http://angelaandtom.co.uk/lib/video/2-1.webmhd.webm" type="video/webm; codecs=vp8,vorbis">
      		<source src="http://angelaandtom.co.uk/lib/video/2-1.mp4.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
              <source src="http://angelaandtom.co.uk/lib/video/2-1.oggtheora.ogv" type="video/ogg; codecs=theora,vorbis">
		</video>
	</a>
</div>
   
    
<div class="full">
	<a id="three" href="#"><img src="http://angelaandtom.co.uk/lib/images/3-1.jpg" alt="" /></a>
</div>
  

<div class="full">
	<a id="four" href="#"><img src="http://angelaandtom.co.uk/lib/images/3-2.jpg" alt="" /></a>
</div>

<div class="full">
	<a id="five" href="#">
		<video id="myvideo2" poster="http://angelaandtom.co.uk/lib/images/4-2.jpg">
  			<source src="http://angelaandtom.co.uk/lib/video/4-1.webmsd.webm" type="video/webm; codecs=vp8,vorbis">
      		<source src="http://angelaandtom.co.uk/lib/video/4-1.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
              <source src="http://angelaandtom.co.uk/lib/video/4-1.oggtheora.ogv" type="video/ogg; codecs=theora,vorbis">
		</video>
	</a>
</div>

CSS

* { padding: 0; margin: 0; }

  html, body { height: 100%; }
  img { display: block; }
 body {
	background-color: #000000;
} 
.full {
			height: 100%;
			overflow: hidden;
		}

JavaScript

$(function () {

    var win = $(window),
        fullscreen = $('.full'),
        image = fullscreen.find('img, video'),
        imageWidth = image.width(),
        imageHeight = image.height(),
        imageRatio = imageWidth / imageHeight,
        currentSlide = 0,
        numSlides = $('.full').length;

    function resizeImage() {
        var winWidth = win.width(),
            winHeight = win.height(),
            winRatio = winWidth / winHeight;

        if (winRatio > imageRatio) {
            image.css({
                width: winWidth,
                height: Math.round(winWidth / imageRatio)
            });
        } else {
            image.css({
                width: Math.round(winHeight * imageRatio),
                height: winHeight
            });
        }
    }

    function advanceToSlide(slidePos){
    	slide = $('.full').eq(slidePos);
    	slide.fadeIn();
    	var video = $('video', slide);

    	$('video').each(function(){
    		$(this).get(0).pause();
    	})

    	if(video.length){
    		console.log(video.get(0).play());
    	}	
    }
    
    $('.full').on('click', function(){
    	$('.full').hide();
    	if(currentSlide < numSlides - 1){
    		currentSlide = currentSlide + 1;
    	} else{
    		currentSlide = 0;
    	}
    	advanceToSlide(currentSlide);
    });
    
    $('.full:gt(0)').hide();
    resizeImage();

});