JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="info-container">
		<p>Video is now <span id="playing">paused</span>!</p>
		<p>Video is now <span id="sound">muted</span>!</p>
	</div>
	<div class="header">
		<div class="container">
			<a href="?<?=time()?>">
				<img width="600" height="100" src="header.png" />
			</a>
		</div>
	</div>
	<div class="container">
		<p>Blue Billywig. Ontwerper en leverancier van het meest complete, gebruiksvriendelijke en flexibele Online Video Platform waarmee vele nationale en internationale klanten op strategische wijze hun videomateriaal beheren, publiceren en analyseren. Dit aantal neemt wekelijks toe.</p>
<p>Sinds onze oprichting in 2006 hebben wij erkenning gekregen als autoriteit op het gebied van online video door te winnen bij de Red Herring Europe Awards, de Deloitte Fast 50 en door uitgeroepen te worden tot FD gazelle. Wij zijn ondertussen uitgegroeid tot marktleider binnen de Benelux. </p>
<p>Marktleider word en blijf je niet zomaar. Blue Billywig volgt nauwlettend de trends en ontwikkelingen binnen de markt en speelt daar met innovatieve oplossingen op in. Wij hebben de ambitie onze voorsprong verder uit te bouwen en zijn hard op weg het grootste en beste online video platform van Europa worden. Klanten als Ahold, KPN, Mediaplanet, Unilever, AFC Ajax, Independent Ireland, Wegener en vele andere prachtnamen publiceren al vanaf ons platform.</p>
		<h2>Nieuws</h2>
		<p>15 febr. 2013 - Vanaf dit jaar gaat Blue Billywig periodiek kennissessies organiseren: een einde-dag-gesprek over diverse thema’s rondom de strategische inzet van Online Video. Over elk onderwerp zal een expert worden uitgenodigd en mogen klanten bij het gesprek aanschuiven. Het Blue Billywig Rondetafelgesprek is een nieuw initiatief dat 1x per kwartaal zal plaatsvinden op een locatie in, of in de buurt van, Hilversum. De expert fungeert tevens als gespreksleider/dagvoorzitter. Per gesprek zijn er tussen de 10 en 15 deelnemers. Het programma vindt plaats tussen 15.30 en 19.00 uur. Dat is...

CSS

html {
	margin: 0;
	padding: 0;
	line-height: normal;
}
body {
	background-color: #FFF;
	color: #777;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 150%;
	padding: 0;
	margin: 0;
}

em {
	font-style: italic;
}

.header a {
	margin: 10px 0;
	border: none;
}

h2 {
	color: #75AADB;
	line-height: normal;
}
.header {
	background-color: #75AADB;
	color: #FFF;
	width: 100%;
	margin: 0;
}
.container {
	width: 600px;
	margin: 0 auto;
}

.hover {
	position: absolute;
	left: -200px;
	top: 200px;
}

.video-container {
	border: 5px solid #A39687 ;
	height: 440px;
	width: 800px;
	position: relative;
}
#info-container {
	z-index: 10;
	font-size: 13px;
	position: fixed;
	top: 20px;
	right: 20px;
	width: 160px;
	border-radius: 50px 0 50px 0;
	background-color: #75AADB;
	color: #FFF;
	padding: 10px 20px;
	border: 5px solid #FFF;
}

.active {
	color: #FFF ;
}
.inactive {
	color: #c9dced ;
}

JavaScript

var player;
var playerState;
var windowDimensions;
$(document).ready(function(){
    $player = $('.video-container');
    
    var videoLocation = $player.offset();   
	console.log(videoLocation.top);
    $('#info-container').html(videoLocation.top);
});