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
<video class="video" id='video-element' autoplay loop muted> <source src='https://senkpatrik.cz/images/meatthezoo.mp4?raw=true' type='video/mp4'> </video> <div id='controls'> <button id='btnMute' class='unmute button' onclick='muteVolume();'></button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#controls { position: absolute; width: 100%; text-align: right; margin-top: -45px; margin-left: -20px; } .video { width: 30%; height: 100%; } .button { text-indent: -9999px; width: 22px; height: 22px; border: none; cursor: pointer; } .mute { background: url('http://image.flaticon.com/icons/svg/10/10430.svg'); background-repeat: no-repeat; background-size: 20px; } .unmute { background: url('http://image.flaticon.com/icons/svg/10/10776.svg'); background-repeat: no-repeat; background-size: 20px; }
CSS
Autoformát
CSS reset
Až na konci
player = document.getElementById('video-element'); btnMute = document.getElementById('btnMute'); function muteVolume() { if (player.muted) { changeButtonType(btnMute, 'mute'); player.muted = false; } else { changeButtonType(btnMute, 'unmute'); player.muted = true; } } function changeButtonType(btn, value) { btn.title = value; //btn.innerHTML = value; btn.className = value + " button"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>