<div class="container">
<h1>Full screen demo</h1>
<video id="shuttle" controls>
<source src="https://youtu.be/OnoNITE-CLc">
</video>
</div>
body {
display: flex;
justify-content: center;
}
.container {
width: 400px;
background: linear-gradient(white 20%, #eee);
box-shadow: 0 0 10px #ccc inset;
border-radius: 10px;
padding: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-left: 1em;
#shuttle:fullscreen {
width: 100%;
height: 100%;
}
}
View Compiled
const vid = document.getElementById('shuttle');
function toggleFullScreen() {
if (!document.fullscreenElement && vid.requestFullscreen) {
vid.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.