I made this small player to be used within iframe
. But I need to give you the option to put it full screen (as most video players I know), but I have no idea how to do it.
I'll leave the player here as an example:
var QS = function (el) {
return document.querySelector(el);
};
document.addEventListener('click', function (e) {
e.preventDefault();
if (! e.target.classList.contains('play-video')) return;
QS('#video').play();
var buttonOverlay = QS('.video-overlay .play-video');
buttonOverlay && buttonOverlay.remove();
QS('.video-overlay').style.backgroundColor = 'transparent';
});
QS("#pause-video").addEventListener('click', function (e) {
e.preventDefault();
QS('#video').pause();
});
var durationBar = QS('.play-duration-bar');
QS('#video').addEventListener('timeupdate', function (e) {
var total = ((e.target.currentTime / e.target.duration) * 100);
durationBar.style.width = total + '%';
})
QS('.play-duration').addEventListener('mousedown', function (e) {
var rect = e.currentTarget.getBoundingClientRect(),
offsetX = e.clientX - rect.left,
offsetY = e.clientY - rect.top;
var fraction = (offsetX / e.currentTarget.clientWidth);
var video = QS('#video');
video.currentTime = video.duration * fraction;
//durationBar.style.width = (fraction * 100) + '%';
});
*, *::after, *::before{
box-sizing: border-box;
}
body{
padding: 0;
margin: 0;
font-family: Arial;
position: absolute;
height: 100%;
width: 100%;
}
.player{
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.player .player-header{
position: absolute;
z-index: 2;
color: white;
padding: 10px 15px ;
opacity: .2;
transition: all .2s linear;
width: 100%;
}
.player:hover .player-header{
background-color: rgba(0, 0, 0, .8);
opacity: 1;
}
.player .player-header > h1{
margin: 0;
padding: 0;
}
.player .player-header > p{
margin: 5px 0;
font-size: 12px;
}
.player video{
width: 100%;
height: 100%;
position: fixed;
}
.player .video-wrapper {
position: relative;
height: 100%;
background-color: #00b630;
}
.player .video-wrapper .video-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
}
.player .player-controls{
position: fixed;
bottom: 0;
text-align: center;
opacity: .1;
width: 100%;
left: 0;
padding: 15px;
transition: all .2s linear;
}
.player:hover .player-controls {
opacity: 1;
background-color: rgba(0, 0, 0, .9);
}
.play-duration {
height: 10px;
width: 100%;
background-color: rgba(255, 255, 255, .2);
position: relative;
margin: 15px 0;
cursor: pointer;
}
.play-duration .play-duration-bar{
background-color: #00b630;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
}
.btn{
background-color: #00b630;
border: none;
padding: 5px;
color: white;
font-size: 15px;
border-radius: 50%;
width: 45px;
height: 45px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn.btn-lg{
width: 80px;
height: 80px;
font-size: 25px;
}
.btn:active{
transform: translateY(2px);
}
<div id="player" class="player">
<div class="player-header">
<h1>Nome do Vídeo</h1>
<p>
descrição do vídeo
</p>
</div>
<div class="video-wrapper">
<video src="//download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" id="video"></video>
<div class="video-overlay">
<a class="play-video" style="height: 45px; display: block; cursor: pointer;">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%" style="pointer-events: none">
<path fill="#00b630" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</a>
</div>
</div>
<div class="player-controls">
<div class="play-duration">
<div class="play-duration-bar"></div>
</div>
<button class="btn play-video">
<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
<path fill="white" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" ></path>
</svg>
</button>
<button id="pause-video" class="btn btn">
<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
<path fill="white" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path>
</svg>
</button>
</div>
</div>
I need to know: How do I put a iframe
on fullscreen?