Filmik w formacie WEBM odtwarzany po lewej stronie na górze i zajmuje ogólnie 25% całości ekranu.

pytanie zadane 27 maja 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,110 p.)

Witam.

Chciałbym na podstronie umieścić krótki filmik w formacie WEBM. 
Niestety ten filmik jest odtwarzany po lewej stronie na górze i 
zajmuje ogólnie 25% całości ekranu.

Gdy odtwarzam ten filmik przez jakiegoś playera, to jest odtwarzany na pełnym ekranie.

Co należy wpisać w HTML albo w CSS, 
aby filmik był odtwarzany na pełnym ekranie?



Kod HTML:

<body>

	<video src="filmik.webm" autoplay loop></video>
</body>



Kod CSS:

video
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
}

2 odpowiedzi

odpowiedź 27 maja 2015 przez HaKIM Szeryf (87,590 p.)
edycja 27 maja 2015 przez HaKIM

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video.

Spróbuj tak:

<video style="width:100%; height: 100%;" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

komentarz 27 maja 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Próbowałem wcześniej wpisać "width: auto;" i "height: auto;" i było to samo.

Wpisze tymrazem "width: 100%;" i "height: 100%;"

Zobecze co z tego wyjdzie.

komentarz 27 maja 2015 przez HaKIM Szeryf (87,590 p.)

W takim razie na 99% to samo.

Wejdź w drugi link. :)

odpowiedź 27 maja 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video


video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

komentarz 27 maja 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Wpisałem w CSS:

video
{
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

Działa i ogólnie filmik jest na pełnym ekranie, ale po lewej stronie jest widoczny cienki pionowy pasek w kolorze białym.

Da sie idealnie ten filmik umieścić?