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
<a hrsef="examople.com/full-video" class="videoPreview" data-video="https://upload.wikimedia.org/wikipedia/commons/transcoded/8/87/Schlossbergbahn.webm/Schlossbergbahn.webm.480p.vp9.webm"> <img src="http://img.djpw.cz/lkp.png" width="150"> </a> <a hrsef="examople.com/full-video" class="videoPreview" data-video="https://upload.wikimedia.org/wikipedia/commons/transcoded/8/87/Schlossbergbahn.webm/Schlossbergbahn.webm.480p.vp9.webm"> <img src="http://img.djpw.cz/lkp.png" width="150"> </a> <a hrsef="examople.com/full-video" class="videoPreview" data-video="https://upload.wikimedia.org/wikipedia/commons/transcoded/8/87/Schlossbergbahn.webm/Schlossbergbahn.webm.480p.vp9.webm"> <img src="http://img.djpw.cz/lkp.png" width="150"> </a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
a { width: 200px; display: block; position: relative; } img { width: 100%; } video { width: 100%; position: absolute; left: 0; }
CSS
Autoformát
CSS reset
Až na konci
(function() { var links = document.getElementsByClassName("videoPreview"); var showVideo = function(e) { var video = document.createElement("video"); video.autoplay = true video.loop = true video.muted = true video.src = this.getAttribute("data-video") this.appendChild(video) } var hideVideo = function(e) { var video = this.children[1] this.removeChild(video) } for(var i = 0; i < links.length ; i++) { links[i].onmouseenter = showVideo; links[i].onmouseleave = hideVideo; } })()
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>