Sticky player

index.html

        <div class="container">
            <div class="header">
                <div class="browse"></div>
            </div>
            
            <div class="col-1">
                <div class="covercard"></div>
                <div class="spine">
                    <div class="now-reading">
                        <div class="progress-bar"></div>
                        <div class="video">
                            <div class="video-wrapper mini vid-embed poster"><video Xautoplay playsinline muted loop src="http://assets2.ign.com/videos/zencoder/2016/05/10/640/00a22c33f5af9345b3b4496bf8601855-500000-1462949036-w.mp4" poster="https://assets1.ignimgs.com/thumbs/userUploaded/2016/5/5/uncharted41280-1462428799659_compact.jpg"></video></div>
                            <div class="video-wrapper mini vid-hero poster"><video Xautoplay playsinline muted loop src="http://assets14.ign.com/videos/zencoder/2016/11/16/640/2d8df1caf19e4876703bf327a30786d2-347000-1479324738-w.mp4" poster="https://assets1.ignimgs.com/thumbs/userUploaded/2016/11/16/nomanssky-1479323659983_compact.jpg"></video></div>
                        </div>
                        <div class="thumb"></div>
                        <div class="headline watching headline-embed limit">Uncharted 4: A Thief's End Review</div>
                        <div class="headline watching paused headline-hero limit">In Wake of No Man's Sky, Game Awards 2016 Will Show More Gameplay</div>
                        <div class="headline today limit">Deadpool 2 Won't Be Populated With Lots of X-Men</div>
                    </div>
                    <div class="queue">
                        <div class="headline today limit">Deadpool 2 Won't Be Populated With Lots of X-Men</div>
                        <div class="headline">See Quicksilver in Days of Future Past</div>
                        <div class="headline">Ashes of the Singularity: Escalation Review</div>
                        <div class="headline">Call of Duty: Infinite Warfare Review</div>
                        <div class="headline">Nintendo Switch Price May Have Been Accidentally Revealed</div>
                        <div class="headline">Deadpool 2 Won't Be Populated With Lots of X-Men</div>
                        <div class="headline">HBO, GRRM Still Discussing Game of Thrones Prequel</div>
                        <div class="headline">See Quicksilver in Days of Future Past</div>
                        <div class="headline">Ashes of the Singularity: Escalation Review</div>
                        <div class="headline">Call of Duty: Infinite Warfare Review</div>
                        <div class="headline">Nintendo Switch Price May Have Been Accidentally Revealed</div>
                        <div class="headline">Deadpool 2 Won't Be Populated With Lots of X-Men</div>
                        <div class="headline">HBO, GRRM Still Discussing Game of Thrones Prequel</div>
                        <div class="headline">See Quicksilver in Days of Future Past</div>
                        <div class="headline">Ashes of the Singularity: Escalation Review</div>
                        <div class="headline">Call of Duty: Infinite Warfare Review</div>
                        <div class="headline">Nintendo Switch Price May Have Been Accidentally Revealed</div>
                        <div class="headline">Deadpool 2 Won't Be Populated With Lots of X-Men</div>
                        <div class="headline">HBO, GRRM Still Discussing Game of Thrones Prequel</div>
                    </div>
                </div>
            </div>
            
            <div class="col-2">
                <div class="hero">
                    <div class="video-wrapper full vid-hero poster"><video Xautoplay playsinline loop src="http://assets14.ign.com/videos/zencoder/2016/11/16/853/2d8df1caf19e4876703bf327a30786d2-724000-1479324738-w.mp4" poster="https://assets1.ignimgs.com/thumbs/userUploaded/2016/11/16/nomanssky-1479323659983.jpg"></video></div>
                </div>
                <div class="content">
                    <div class="content-headline">In Wake of No Man's Sky, Game Awards 2016 Will Show More Gameplay</div>
                    <div class="content-p">Speaking at a Q&A, as reported by The Playlist, Deadpool co-screenwriter Paul Wernick revealed that 20th Century Fox and Marvel Studios agreed to essentially swap the use of Ego in exchange for allowing the Deadpool creative team to use Negasonic Teenage Warhead with different powers than her comic book counterpart in this year's Deadpool.</div>
                    <div class="content-p">The trials are a good way to get to know the charming captains that run them and learn about the history and traditions of Alola — even on the first island, I’d heard bits and pieces about the elusive “guardian Deity” Pokemon and come to understand the trials’ purpose in the local legends surrounding them. After two trials, I was as fully invested in the new region as I was with my familiar quest to become the champion.</div>
                    <div class="video-p"><div class="video-wrapper full vid-embed poster"><video Xautoplay playsinline loop src="http://assets2.ign.com/videos/zencoder/2016/05/10/853/00a22c33f5af9345b3b4496bf8601855-1000000-1462949036-w.mp4" poster="https://assets1.ignimgs.com/thumbs/userUploaded/2016/5/5/uncharted41280-1462428799659.jpg"></video></div></div>
                    <div class="content-p">Speaking at a Q&A, as reported by The Playlist, Deadpool co-screenwriter Paul Wernick revealed that 20th Century Fox and Marvel Studios agreed to essentially swap the use of Ego in exchange for allowing the Deadpool creative team to use Negasonic Teenage Warhead with different powers than her comic book counterpart in this year's Deadpool.</div>
                    <div class="content-p">The trials are a good way to get to know the charming captains that run them and learn about the history and traditions of Alola — even on the first island, I’d heard bits and pieces about the elusive “guardian Deity” Pokemon and come to understand the trials’ purpose in the local legends surrounding them. After two trials, I was as fully invested in the new region as I was with my familiar quest to become the champion.</div>
                    <div class="content-p">Speaking at a Q&A, as reported by The Playlist, Deadpool co-screenwriter Paul Wernick revealed that 20th Century Fox and Marvel Studios agreed to essentially swap the use of Ego in exchange for allowing the Deadpool creative team to use Negasonic Teenage Warhead with different powers than her comic book counterpart in this year's Deadpool.</div>
                    <div class="content-p">The trials are a good way to get to know the charming captains that run them and learn about the history and traditions of Alola — even on the first island, I’d heard bits and pieces about the elusive “guardian Deity” Pokemon and come to understand the trials’ purpose in the local legends surrounding them. After two trials, I was as fully invested in the new region as I was with my familiar quest to become the champion.</div>
                    <div class="content-p">Speaking at a Q&A, as reported by The Playlist, Deadpool co-screenwriter Paul Wernick revealed that 20th Century Fox and Marvel Studios agreed to essentially swap the use of Ego in exchange for allowing the Deadpool creative team to use Negasonic Teenage Warhead with different powers than her comic book counterpart in this year's Deadpool.</div>
                    <div class="content-p">The trials are a good way to get to know the charming captains that run them and learn about the history and traditions of Alola — even on the first island, I’d heard bits and pieces about the elusive “guardian Deity” Pokemon and come to understand the trials’ purpose in the local legends surrounding them. After two trials, I was as fully invested in the new region as I was with my familiar quest to become the champion.</div>
                    <div class="content-p">Speaking at a Q&A, as reported by The Playlist, Deadpool co-screenwriter Paul Wernick revealed that 20th Century Fox and Marvel Studios agreed to essentially swap the use of Ego in exchange for allowing the Deadpool creative team to use Negasonic Teenage Warhead with different powers than her comic book counterpart in this year's Deadpool.</div>
                    <div class="content-p">The trials are a good way to get to know the charming captains that run them and learn about the history and traditions of Alola — even on the first island, I’d heard bits and pieces about the elusive “guardian Deity” Pokemon and come to understand the trials’ purpose in the local legends surrounding them. After two trials, I was as fully invested in the new region as I was with my familiar quest to become the champion.</div>
                </div>
            </div>
        </div>
        <audio controls>
<!--             <source src="http://themushroomkingdom.net/sounds/wav/smb/smb_kick.wav" type="audio/mpeg"> -->
<!--             <source src="http://themushroomkingdom.net/sounds/wav/sm64/sm64_goomba_flattened.wav" type="audio/mpeg"> -->
            <source src="http://themushroomkingdom.net/sounds/wav/sm64/sm64_mario_hoohoo.wav" type="audio/mpeg">
<!--             <source src="http://themushroomkingdom.net/sounds/wav/smb/smb_bump.wav" type="audio/mpeg"> -->
<!--             <source src="http://www.freesound.org/data/previews/66/66220_906455-lq.mp3" type="audio/mpeg"> -->
<!--             <source src="http://www.freesound.org/data/previews/273/273870_1031833-lq.mp3" type="audio/mpeg"> -->
<!--             <source src="http://www.freesound.org/data/previews/349/349330_6402675-lq.mp3" type="audio/mpeg"> -->
        </audio>

script.js

$(document).ready(function() {
    var coverCardHeight = $('.covercard').outerHeight(),
        fixedHeight = coverCardHeight - 45,
        heroHeight = $('.hero').outerHeight() + 1,
        embedHeight = $('.video-wrapper.full.vid-embed').outerHeight(),
        embedPos = $('.video-wrapper.full.vid-embed').offset().top,
        embedFloatPos = embedHeight + embedPos - 41,
        contentHeight = $('.col-2').outerHeight(),
        windowHeight = $(window).height(),
        progressGoal = contentHeight - windowHeight + 41;
    
    function playSound() {
        $('audio')[0].play().volume = 0.0;
        $('audio')[0].volume = 0.2;
    }
    
    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop()
        progressPercent = (scrollPos / progressGoal) * 100;
        
        $('.progress-bar').css('width', progressPercent + '%');
        
        if (scrollPos >= fixedHeight) {
            $('.spine').addClass('fixed');
        } else if (scrollPos < fixedHeight) {
            $('.spine').removeClass('fixed');
        }
        
        if (scrollPos >= heroHeight && $('.spine.floating').length < 1) {
            $('.spine').addClass('floating');
            playSound();
        } else if (scrollPos < heroHeight && $('.spine.floating').length > 0) {
            $('.spine').removeClass('floating');
        }
        
        if (scrollPos >= embedFloatPos && $('.video-wrapper.full.vid-embed').hasClass('playing') && $('.now-reading.now-embed').length < 1) {
            $('.now-reading').addClass('now-embed');
//            playSound();
        } else if (scrollPos < embedFloatPos && $('.now-reading.now-embed').length > 0) {
            $('.now-reading').removeClass('now-embed');
        }
    });
});

$(document).ready(function() {
    function videoClickedAction(clickedVideo, otherVideo) {
        if ($(clickedVideo).hasClass('poster')) {
            $(clickedVideo).removeClass('poster').addClass('playing');
            $(clickedVideo).children('video')[0].play();
            $(clickedVideo).children('video')[1].play();
        } else if ($(clickedVideo).hasClass('playing')) {
            $(clickedVideo).removeClass('playing').addClass('poster');
            $(clickedVideo).children('video')[0].pause();
            $(clickedVideo).children('video')[1].pause();
        }
        if ($(otherVideo).hasClass('playing')) {
            $(otherVideo).removeClass('playing').addClass('poster');
            $(otherVideo).children('video')[0].pause();
            $(otherVideo).children('video')[1].pause();
        }
        if ($('.video-wrapper.mini.vid-hero.playing').length > 0) {
            $('.headline.headline-hero').removeClass('paused');
        } else {
            $('.headline.headline-hero').addClass('paused');
        }
    }
    
    $('body').on('click', '.video-wrapper', function() {
        if ($(this).hasClass('vid-hero')) {
            var clickedVideo = $('.vid-hero'),
                otherVideo = $('.vid-embed');
            
            videoClickedAction(clickedVideo, otherVideo);
            $('.now-reading').removeClass('now-embed');
        } else if ($(this).hasClass('vid-embed')) {
            var clickedVideo = $('.vid-embed'),
                otherVideo = $('.vid-hero');
            
            videoClickedAction(clickedVideo, otherVideo);
        }
    });
});

$(document).ready(function() {
    $('body').on('mouseenter mouseleave', '.fixed .queue', function(event) {
      $('body').toggleClass('locked');
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

sticky-player.markdown

Sticky player

A Pen by Mark Ryan Sallee on CodePen.

License.

style.css

html {
    height: 100%;
    
    font-family: DINRoundCompPro-Bold;
    font-family: ARSMaquette-Regular;
    font-size: 10px;
    line-height: 1em;
}

body {
    height: 100%;
    margin: 0;
}

body.locked {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

audio {
    display: none;
}

.container {
    width: 1240px;
    margin: 0 auto;
    padding-top: 41px;
    
    font-size: 0;
}

.header {
    position: fixed;
    top: 0;
    z-index: 3;
    
    width: 1240px;
    height: 41px;
    
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.browse {
    width: 245px;
    height: 100%;
    
    background-color: #bf1313;
}

.col-1 {
    vertical-align: top;
    
    display: inline-block;
    width: 245px;
    height: 100%;
    margin: 0 9px 0 0;
}

.covercard {
    position: relative;
    z-index: 1;
    
    height: 359px;
    
    background-color: #bf1313;
}

.now-reading {
    position: relative;
    
    width: 245px;
    padding-bottom: 27px;
    
    border-bottom: 1px solid #ccc;
}

.progress-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    
    content: '';
    display: block;
    height: 5px;
    max-width: 100% !important;
    
    background-color: #bf1313;
}

.video {
    position: absolute;
    top: -183px;
    
    width: 300px;
    height: 169px;
    
/*    background-color: #252627;*/
    
    opacity: 0.0;
    transition: opacity 0.1s ease 0.1s;
}

.video video {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

.video .vid-embed {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    opacity: 0.0;
    
    transition: opacity 0.3s ease, z-index 0.0s 0.3s;
}

.now-embed .vid-embed {
    z-index: 3;
    
    opacity: 1.0;
    
    transition: opacity 0.5s ease;
}

.now-embed .vid-hero {
    visibility: hidden;
}

.video-wrapper {
    position: relative;
    
    width: 100%;
    height: 0;
    padding: 0 0 56.25% 0;
}

.hero .video-wrapper {
    width: 737px;
    padding: 0 0 415px 0;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

.video-wrapper.poster:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    
    background-color: rgba(0,0,0, 0.5);
}

.video-wrapper.poster:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    
    content: '';
    display: block;
    width: 20%;
    height: 0;
    padding: 0 0 20% 0;
    margin: auto;
    
    background-color: #bf1313;
    border-radius: 50%;
    
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: 58% center;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA5cHgiIGhlaWdodD0iMjQxcHgiIHZpZXdCb3g9IjMyIDE2IDIwOSAyNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQxICgzNTMyNikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxwYXRoIGQ9Ik0xMzQuMjQwNjQxLDM2LjE4MzIxNTIgQzEzNS42MjE1ODYsMzMuNzkxMzQ4MyAxMzcuODU1ODg2LDMzLjc4MzI4NzMgMTM5LjI0MTQ4NSwzNi4xODMyMTUyIEwyNTQuNjE4MTcyLDIzNi4wMjE0OTkgQzI1NS45OTkxMTcsMjM4LjQxMzM2NiAyNTQuODg4OTQ4LDI0MC4zNTIzNTcgMjUyLjExNzc1LDI0MC4zNTIzNTcgTDIxLjM2NDM3NjEsMjQwLjM1MjM1NyBDMTguNjAyNDg2LDI0MC4zNTIzNTcgMTcuNDc4MzU0OCwyMzguNDIxNDI3IDE4Ljg2Mzk1MzksMjM2LjAyMTQ5OSBMMTM0LjI0MDY0MSwzNi4xODMyMTUyIFoiIGlkPSJQb2x5Z29uIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM2Ljc0MDk5MiwgMTM2LjYxMTM2NSkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTEzNi43NDA5OTIsIC0xMzYuNjExMzY1KSAiPjwvcGF0aD4KPC9zdmc+");
}

.thumb {
    box-sizing: content-box;
    width: 100%;
    height: 138px;
/*    border-top: 31px solid #fff;*/
    margin-bottom: 27px;
    
/*
    height: 169px;
    border-bottom: none;
*/
    
    background-color: #ccc;
    background-image: url('https://assets2.ignimgs.com/2016/11/13/watchdogs21280jpg-f487d0_320w.jpg');
    background-image: url('https://assets2.ignimgs.com/2016/11/14/deadpoolgotg1280jpg-f487ed_320w.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    
    opacity: 1.0;
    transition: opacity 0.2s ease;
}

.floating .thumb {
    opacity: 0.0;
}

.headline {
    margin: 0 27px;
    
    font-size: 14px;
    line-height: 19px;
}

.headline:before {
    display: block;
    
    color: #bf1313;
    font-family: DINRoundCompPro-Bold;
    text-transform: uppercase;
}

.headline.today:before {
    content: 'Trending today';
}

.headline.watching:before {
    content: 'Now Watching';
}

.headline.watching.paused:before {
    content: 'Now Reading';
}

.headline.limit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 57px;
    overflow: hidden;
    
    transition: all 0.2s ease-out;
}

.headline.watching {
    height: 0;
    margin: 0 27px;
}

.now-reading .headline {
    font-weight: bold;
}

.spine {
    height: 100%;
}

.queue {
    height: calc(100% - 336px);
    overflow: scroll;
}

.queue .headline + .headline {
    margin-bottom: 27px;
}

.queue {
    padding-top: 27px;
}

.queue .headline.today {
    height: 0;
    margin: 0 27px;
}

.col-2 {
    vertical-align: top;
    
    display: inline-block;
    width: 986px;
}

.hero {
    position: relative;
    
    width: 100%;
    height: 415px;
    
    background-color: #252627;
}

.hero video {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 737px;
    height: 415px;
}

.content {
    width: 627px;
    margin-left: 99px;
}

.content-headline {
    margin: 27px 0;
    
    color: #252627;
    font-family: ARSMaquette-Regular;
    font-weight: 800;
    font-size: 38px;
    line-height: 34px;
/*
    font-size: 54px;
    line-height: 47px;
*/
    letter-spacing: -1.254px;
    text-transform: uppercase;
}

.content-p {
    margin: 27px 0;
    
    color: #252627;
    font-family: ARSMaquette-Regular;
    font-size: 17px;
    line-height: 27px;
}

/* Fixed styles */

.spine.fixed {
    position: fixed;
    top: 55px;
    top: 86px;
    
    width: 245px;
}

.video {
/*
    animation: drop 0.4s ease-out;
    animation-direction: alternate;
    animation-fill-mode: backwards;
*/
}

.spine:not(.floating) .video {
    animation: drip 0.2s ease-out;
    animation-fill-mode: forwards;
}

.spine.fixed.floating .video {
    z-index: 1;
    
    opacity: 1.0;
    animation: drop 0.3s ease-out;
/*    animation-timing-function: cubic-bezier(.38,1.02,.59,.52);*/
    animation-fill-mode: forwards;
    
    transition: opacity 0.1s ease;
}

@keyframes drip {
    0% {
        top: -31px;
        
/*
        width: 245px;
        height: 138px;
*/
    }
    100% {
        top: -150px;
        
/*
        width: 245px;
        height: 138px;
*/
    }
}

@keyframes drop {
    0% {
        top: -150px;
    }
    50% {
        top: -10px;
    }
    100% {
        top: -31px;
    }
}

.spine.fixed.floating .now-reading .headline.limit.watching {
    height: 57px;
}

.spine.fixed.floating .now-reading .headline.limit.today {
    height: 0;
}

.spine.fixed.floating .queue .headline.limit.today {
    height: 57px;
    margin: 0 27px 27px 27px;
}

/* embed floating */

.spine.fixed.floating .now-reading .headline.limit.watching.headline-embed {
    height: 0px;
}

.spine.fixed.floating .now-reading.now-embed .headline.limit.watching.headline-embed {
    height: 57px;
}

.spine.fixed.floating .now-reading.now-embed .headline.limit.watching.headline-hero {
    height: 0;
}