Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="videop"> <video id="player" style="width: 100% !important; height: auto !important;" controls="controls"> <source id="sourceVideo" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <button type="button" onclick="forwardRewind(20)" class="buttspeeda">>></button> <button type="button" onclick="forwardRewind(-10)" class="buttspeedb"><<</button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.videop{ display:table; width:auto; position:relative; width: 100%; } .buttspeeda {display: none;} video:hover + .buttspeeda {display: block; font-size: 18px; width: 48px; height: 48px; border-radius: 50px; color: #000; padding: 8px; background-color: #fff; border: none; font-weight: bold; z-index:100; position:absolute; left:100px; width: 48px; height: 48px; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center;} .buttspeeda:hover {display: block; font-size: 18px; width: 48px; height: 48px; border-radius: 50px; color: #000; padding: 8px; background-color: #fff; border: none; font-weight: bold; z-index:100; position:absolute; left:100px; width: 48px; height: 48px; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center;} .buttspeedb {display: none;} video:hover + .buttspeedb {display: block; font-size: 18px; width: 48px; height: 48px; border-radius: 50px; color: #000; padding: 8px; background-color: #fff; border: none; font-weight: bold; z-index:100; position:absolute; left:0%; width: 48px; height: 48px; right:100px; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center;} .buttspeedb:hover {display: block; font-size: 18px; width: 48px; height: 48px; border-radius: 50px; color: #000; padding: 8px; background-color: #fff; border: none; font-weight: bold; z-index:100; position:absolute; left:0%; width: 48px; height: 48px; right:100px; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>