Online Tools

Text to Number

JOGOS Video Player

A video player utility, in the examples below playing the JOGOS trailer. It also has a clean play button animation, and is good at modifying its size to the size of the frame it is put in. Even if the base code may work on mobile, some video URLs are not compatible.

Source Code

<html>

<head>

</head>

<body>

<style>

button {

opacity: 0.8;

background-color: #222222;

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

font-size: 48px;

display: block;

margin: 4px 2px;

margin-left: auto;

margin-right: auto;

transition-duration: 0.4s;

cursor: pointer;

background-color: white;

color: black;

border-radius: 20px;


position: absolute;

top: 30;

bottom: 30;

left: 30;

right: 30;

margin: auto;

}

button:hover {

background-color: #222222;

color: white;

font-size: 64px;

}

body { margin: 0;}

</style>

<div>

<video id=jvidplayer height="100%" width="100%" style="pointer-events: none;"></video>

<script>

var jvid = document.getElementById('jvidplayer');

// === ENTER THE URL FOR THE VIDEO === (currently google drive url to show ability to use drive videos)

jvid.src = 'https://drive.google.com/u/0/uc?id=1oxlclu-6xkCzO-mxxI0bXLtI7SFCJof3&export=view';

function play() {

var jvid = document.getElementById('jvidplayer');

var playbutton = document.getElementById('playbutton');

jvid.play();

playbutton.style.display = 'none';

jvid.controls = true;

jvid.style.pointerEvents= 'auto';

}

</script>

<button id=playbutton onclick='play()' width="100%" height="100%">▶</button>

</div>

</body>

</html>