Miért nem pozicionálja, és méretezi a videót?
Most próbálom elsajátítani önállóan a html + css alapjait (videók, online anyagok segítségével).
Szeretnék egy videót berakni háttérnek, ehhez ezeket a sorokat írtam.
.vpoz {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body class="hatter">
<video autoplay loop poster="xy.jpg" class="vpoz">
<source src="xy.mp4" type="video/mp4">
Ezzel elméletileg középre kellene pozicionálni a videót, illetve a méretét kellene az adott képernyő méretére pozicionálni.
A videóban tökéletsen működik, nekem viszont nem akar sikerülni, mert megjelenik az alsó, és oldalsó gördítő sáv is, vagyis valami hiba van a sorok közt.
Meg tudnám oldani, hogy pl fix 300px-300px méretű legyen a videó, de az máshogy mutatna minden képernyőn, gondolom nem kell részletezni...
Köszönöm előre is a segítséget!
(Ha hülyeséget írtam, ne kövezzetek meg, még csak ismerkedek a dologgal.)
válasza:<style>
body {
margin: 0;
}
.hatter {
background-color: #000000;
}
.vpoz {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body class="hatter">
<video autoplay loop poster="xy.jpg" class="vpoz">
<source src="xy.mp4" type="video/mp4">
<source src="xy.webm" type="video/webm">
</video>
</body>
válasza:Nem, az nem a videó 100 százaléka, hanem a szülő elem (jelen esetben: body) 100 százaléka.
Az alábbinak viszont semmi értelme:
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
2 sorral lehetne helyettesíteni:
width: 100%;
height: 100%;
Én mondjuk az következőt jobban szeretem használni, mert így garantáltan kitölti az ablakot (a százalékban megadott magassággal szoktak gondok lenni, mert a body alapértelmezetten nem tölti ki a teljes képernyőt, csak szélességében):
width: 100vw;
height: 100vh;
(vw: viewport width, azaz az ablak szélessége, vh: viewport height, azaz az ablak magassága)
A "top: 50%" nem azt jelenti, hogy a téglalap közepe lesz pontban középen, hanem a teteje, a "left: 50%" pedig a téglalap bal oldalára vonatkozik, szóval ezt hagyd el, mert csak eltolod vele a videót!
Az alábbit meg teljesen fölösleges kiírni, ugyanis ez az alapértelmezett beállítás (amúgy meg ha ):
width: auto;
height: auto;
A body-nak nem szokás class-t adni, mert dokumentumonként csak egy van belőle. CSS-ben lehet html tagekre is hivatkozni, olyankor nem raksz a név elé semmilyen karaktert.
válasza:Bocsi, elkezdtem az egyik zárójelbe írni valamit, aztán áttértem valami másra, és elfelejtettem befejezni.:D
Azt akartam írni, hogy amúgy ha rám hallgatsz, és úgy adod meg a szélességet és magasságot, ahogy én írtam, azzal amúgy is felülírnád a korábban beállított értékeket, szóval semmi értelme nem lenne
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!