index.html

<div class="snow">
	<ul class="hovers">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="eo">
		<li class="cover">
			<div class="image"></div>
			<div class="vid" id="tv"></div>
		</li>
		<li class="side top"></li>
		<li class="side right"></li>
		<li class="side bottom"></li>
		<li class="side left"></li>
	</ul>
</div>

script.js

var tag = document.createElement('script');
		tag.src = 'https://www.youtube.com/player_api';
	var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	var tv,
		playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
	var vid = {'videoId': '6z8Z9Mp2quo', 'suggestedQuality': 'hd1080', startSeconds: 6, endSeconds: 33}; 

	

	function onYouTubePlayerAPIReady(){
		tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
	}

	function onPlayerReady(){
		tv.loadVideoById(vid).mute();
	}

	function onPlayerStateChange(e) {
		if (e.data === 1){
			$('#tv').addClass('on');
		} else if (e.data === 0){
			tv.seekTo(vid.startSeconds);
		}
	}

	var hr = 26;

	$(document).ready(function(){

		TweenLite.set('.eo', {transformPerspective: 1567, rotationX: 43, rotationY: 33});

		$('.hovers')
			.on('mouseover', 'li:nth-child(1)', function(){
				TweenLite.to('.eo', 1.5, {rotationX: -hr, rotationY: hr, ease: 'Power4.easeOut'});
			})
			.on('mouseover', 'li:nth-child(2)', function(){
				TweenLite.to('.eo', 1.5, {rotationX: -hr, rotationY: -hr, ease: 'Power4.easeOut'});
			})
			.on('mouseover', 'li:nth-child(3)', function(){
				TweenLite.to('.eo', 1.5, {rotationX: hr, rotationY: hr, ease: 'Power4.easeOut'});
			})
			.on('mouseover', 'li:nth-child(4)', function(){
				TweenLite.to('.eo', 1.5, {rotationX: hr, rotationY: -hr, ease: 'Power4.easeOut'});
			})
			.on('mouseout', function(){
				TweenLite.to('.eo', 3, {rotationX: 43, rotationY: 33, ease: 'Power4.easeOut'});
			})
	});

style.less

html {
  width: 100%;
  height: 100%;

  body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    overflow: hidden;

    background: #1a1a19 linear-gradient(125deg, #1a1a19, #191a1a 30%, #121212 90%);

    * {
      box-sizing: border-box;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      li {
        display: block;
      }
    }
  }

  ::selection {
    background: #ff0;
    color: #ff0;
  }
}

.snow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%,-50%);

  width: auto;
  height: auto;

  .hovers {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);

    width: 125%;
    height: 100%;

    li {
      width: 50%;
      height: 50%;
      float: left;
    }
  }

  .eo {
    width: 510px;
    height: 720px;

    transform-style: preserve-3d;
    transform-origin: 50% 50% -70px;

    .cover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;

      width: 100%;
      height: 100%;

      overflow: hidden;

      background: url('http://i.imgur.com/369QT3X.jpg');
      background-size: cover;
      background-position: center;

      .image {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;

        width: 100%;
        height: 100%;

        background: url('http://i.imgur.com/nXQHPoU.png');
        background-position: -25px -25px;
      }

      .vid {
        position: absolute;
        top: 0;
        left: -300px;
        z-index: 7;

        width: 1280px;
        height: 720px;

        margin: auto;

        opacity: 0;

        transition: opacity 3s;
        -webkit-transition: opacity 3s;

        &.on {
          opacity: 1;
        }
      }
    }

    .side {
      background: url('http://i.imgur.com/nXQHPoU.png');

      &.left, &.right {
        width: 25px;
        height: 100%;
      }

      &.top, &.bottom {
        width: 100%;
        height: 25px;
      }

      &.top {
        position: absolute;
        top: -25px;
        left: 0;
        transform: rotateX(90deg);
        transform-origin: 100% 102%;

        background-position: -25px 0 ;

        &:after {
          content: '';

          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 4px;

          background: #f6f6f6;
        }
      }

      &.right {
        position: absolute;
        top: 0;
        right: -25px;
        transform: rotateY(90deg);
        transform-origin: 0 0 1px;

        background-position: -535px -25px;

        &:after {
          content: '';

          position: absolute;
          top: 0;
          right: -2px;

          width: 4px;
          height: 100%;

          background: #f6f6f6;
        }
      }

      &.bottom {
        position: absolute;
        bottom: -25px;
        left: 0;
        transform: rotateX(-90deg);
        transform-origin: 100% -3%;

        background-position: -25px -745px;

        &:after {
          content: '';

          position: absolute;
          bottom: 0;
          left: 0;

          width: 100%;
          height: 4px;

          background: #f6f6f6;
        }
      }

      &.left {
        position: absolute;
        top: 0;
        left: -25px;

        transform: rotateY(-90deg);
        transform-origin: 100% 0%;

        background-position: 0 -25px;
      }
    }
  }
}

Video-mag-cover.markdown

Video mag cover

Piece of code from http://exorrrd.com which I currently work on. Another usage of YouTube api + some slick greensock tweening (hover corners of the mag to see it movin').

Btw EO is the very first printed 99% Icelandic snowboard magazine featuring all Íslensk (og non-Íslensk) pros & pro wannabies. #1 gonna be released 23/4/2015 + there's gonna be a party :) - https://www.facebook.com/events/885631791496216/

#WHOSHARESWINS

A Pen by Krz Szzz on CodePen.

License.