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
<title>Responsivní video</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <h1>Responsivní video</h1> <h2>Automatická výška</h2> <p>Ignoruje se poměr stran.</p> <iframe width="560" height="315" src="http://www.youtube.com/embed/6HT-yirOGoo" frameborder="0" allowfullscreen></iframe> <h2>Maximální šířka</h2> <div style="max-width: 500px"> <div class="pomer-stran"> <iframe width="560" height="315" src="http://www.youtube.com/embed/6HT-yirOGoo" frameborder="0" allowfullscreen></iframe> </div> </div> <h2>Neomezená šířka</h2> <div class="pomer-stran"> <iframe width="560" height="315" src="http://www.youtube.com/embed/6HT-yirOGoo" frameborder="0" allowfullscreen></iframe> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
iframe, canvas, video, svg { max-width: 100%; box-sizing: border-box; height: auto; } .pomer-stran { position: relative; height: 0; /* poměr stran 16:9 */ padding-top: 56.25%; } .pomer-stran > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>