JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/5.8.8/video-js.css">
<script src="https://vjs.zencdn.net/5.8.8/video.js"></script>
<script src="https://www.monobprod.fr/jquery.js"></script>
<body>
<header>
<img id="logo" src="http://www.monboprod.fr/monboprod.png" alt="Monbo Prod" />

<nav>
<a href="#captations"><img class="boutons" src="http://www.monboprod.fr/boutoncaptations.png" onmouseover="this.src='http://www.monboprod.fr/boutoncaptationsnoir.png'" onmouseout="this.src='http://www.monboprod.fr/boutoncaptation.png'" alt="Captations et teasers" /></a>
<a href="#corporate"><img class="boutons" src="http://www.monboprod.fr/boutoncorporate.png" onmouseover="this.src='http://www.monboprod.fr/boutoncorporatenoir.png'" onmouseout="this.src='http://www.monboprod.fr/boutoncorporate.png'" alt="Productions corporate" /></a>
<a href="#TV"><img class="boutons" src="http://www.monboprod.fr/boutontv.png" onmouseover="this.src='http://www.monboprod.fr/boutontvnoir.png'" onmouseout="this.src='http://www.monboprod.fr/boutontv.png'" alt="Productions TV" /></a>
<a href="http://www.facebook.com/MonboProd" target="_blank"><img class="boutons" src="http://www.monboprod.fr/facebook.png" onmouseover="this.src='http://www.monboprod.fr/facebooknoir.png'" onmouseout="this.src='http://www.monboprod.fr/facebook.png'" alt="Facebook" /></a>
<a href="http://www.vimeo.com/monboprod" target="_blank"><img class="boutons" src="http://www.monboprod.fr/vimeo.png" onmouseover="this.src='http://www.monboprod.fr/vimeonoir.png'" onmouseout="this.src='http://www.monboprod.fr/vimeo.png'" alt="Vimeo" /></a>
<a href="https://www.linkedin.com/company/monbo-prod" target="_blank"><img class="boutons" src="http://www.monboprod.fr/linkedin.png" onmouseover="this.src='http://www.monboprod.fr/linkedinnoir.png'" onmouseout="this.src='linkedin.png'" alt="LinkedIn" /></a>
<a href="mailto:contact@monboprod.fr"><img class="boutons" src="http://www.monboprod.fr/email.png"...

CSS

@charset "UTF-8";

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
background-color:#fff;
}

header
{
display:flex;
justify-content: space-around;
align-items:center;
position:fixed;
background-color:#e6e6e6;
max-width: 1050px;
height:auto;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
padding : 20px;
border-radius:0 0 20px 20px;
z-index:1000;
}

#logo
{
width:350px;
height:auto;
border:0;
}

.boutons
{
width:auto;
height:20px;
margin-left:4px;
margin-right:4px;
border:0;
}

section
{
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
background-color:#e6e6e6;
max-width: 1050px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
padding:20px;
border-radius:20px;
}

h1
{
font-family: Arial, Verdana, sans-serif;
font-size:1em;
font-weight:bold;
color:#000;
padding:0;
margin:0;
}

p
{
display:flex;
align-items:baseline;
justify-content: center;
flex-wrap: wrap;
}

.extrait
{
margin:0;
padding:0;
width: 240px;
height: 135px;
border:0;
}

#captations
{
margin-top:130px;	
	}

.video-js {
  font-size: 10px;
  color: #fff;
  height:270px;
  width:480px;
}

.vjs-default-skin .vjs-big-play-button {
  font-size: 2em;
  line-height: 1.5em;
  height: 1.5em;
  width: 1.5em;
  border: 0.06666em solid #fff;
  border-radius: 0.3em;
  left: 50%;
  top: 50%;
  margin-left: -0.75em;
  margin-top: -0.75em;
}

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: #e6e6e6;
  background-color: rgba(230, 230, 230, 0.3);
}

.video-js .vjs-slider {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.5);
}

.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}

.video-js .vjs-load-progress {
  background: white;
  background: rgba(255, 255, 255, 0.5);
}

.video-js .vjs-load-progress div {
  background: white;
 ...

JavaScript

$('nav a').click( function() {
		var page = $(this).attr('href'); 
		var speed = 400;
		$('html, body').animate( { scrollTop: $(page).offset().top - 130 }, speed );
		return false;
	});


Video = document.getElementById("video");

function changevideo(value) {
    if (value == 1) {
    Video.src = "https://player.vimeo.com/external/215988962.hd.mp4?s=7675f70ba2fd93ed4007e1cdbb38ff1c53367145&profile_id=119";
  }
}