Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] Responsive HTML5 background video
d4ng
post
Post #1





Grupa: Zarejestrowani
Postów: 191
Pomógł: 4
Dołączył: 7.03.2010

Ostrzeżenie: (0%)
-----

Witajcie chciałbym Was prosić o rzucenie okiem na poniższy kod. Czy waszym zdaniem jest oki, jak nie to jak go udoskonalić? Zależy mi na tym aby tłem strony było nagranie video oraz żeby całość była responsywna. Jeżeli dana przeglądarka nie obsługuje takiego bajeru to ma sie pokazać normalne tło np. bg.png. Jak to zrobić?

[HTML] pobierz, plaintext 
  1. </head>
  2.  
  3. <body>
  4. 	<div id="big-video-wrap">
  5. 		<video width="100%" autoplay loop muted>
  6. 			<source src="images/intro.mp4" type="video/mp4">
  7. 		</video>
  8. 	</div>
  9. 	<div class="video-pattern"></div>
  10. 		<div id="content">
[HTML] pobierz, plaintext


Arkusz styli:

[HTML] pobierz, plaintext 
  1. body {
  2. 	font-family: 'Times New Roman', sans-serif;
  3. 	color: #fff;
  4. }
  5. #big-video-wrap {
  6. 	overflow: hidden;
  7. 	position: absolute;
  8. 	height: 100%;
  9. 	width: 100%;
  10. 	top: 0;
  11. 	left: 0;
  12. 	z-index: -11;
  13. }
  14. .video-pattern {
  15. 	position: absolute;
  16. 	z-index: -1;
  17. 	top: 0;
  18. 	left: 0;
  19. 	width: 100%;
  20. 	height: 100%;
  21. 	background: rgba(0,0,0, 0.2) url(images/cien.png);
  22. }
[HTML] pobierz, plaintext


Ten post edytował d4ng 17.02.2014, 11:11:47
Go to the top of the page
+Quote Post
qbas-s
post
Post #2





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 28.06.2009

Ostrzeżenie: (0%)
-----

ja przy tego typu pomysłach wzoruję się na fragmencie strony http://www.ghibli.maserati.com/. Tam jest to fajnie responsywnie zrobione
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 02:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn