Pomiędzy górnym a dolnym tłem ma być odtwarzany krótki filmik

pytanie zadane 29 listopada 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,110 p.)
zamknięte 9 grudnia 2017 przez Krzysiek_34

Witam.

Aktualnie na podstronie mam odtwarzany krótki filmik na pełnym ekranie z wykorzystaniem position: fixed. Chciałbym, aby ten filmik był odtwarzany pomiędzy górnym a dolnym tłem tej podstrony.

Górne tło ma wyglądać następująco:

http://imageshack.com/a/img924/561/25KFdN.jpg

Dolne tło wraz ze stopką ma wyglądać następująco:

http://imageshack.com/a/img924/285/Xq660Y.jpg

Aktualny kod z filmikiem odtwarzanym na pełnym ekranie (brak widocznego górnego i dolnego tła z ukośnymi paskami):

<body>

	<video autoplay loop id="video_media">
		<source src="wideo/filmik.webm" type="video/webm">
		<source src="wideo/filmik.mp4" type="video/mp4">
	</video>
	
	<div class="wrapper">
	
		<nav class="main-nav">
			<ul>
				<li class="home"><a href="index.php">Strona główna</a></li>
				<div class="login">Logowanie</div>
			</ul>
		</nav>
		
		<div id="header">
			<div class="text">
				<span>Elektronika</span>
			</div>
		</div>
		
	</div>
		
	<footer>Elektronika &copy; 2017</footer>
</body>

body
{
	font-family: Verdana;
	background-attachment: fixed;
	margin: 0;
	width: 100%;
	height: 495vh;
	position: relative;
}

video
{
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -100;
	pointer-events: none;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.main-nav
{
	overflow: hidden;
	background-color: #C34F4F;
	padding: 6px;
	margin-top: 10px;
}

.main-nav ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.main-nav ul li.home
{
	float: left;
}

.main-nav ul li a
{
	display: block;
	padding: 5px;
	background-color: #002D6E;
	color: white;
	font-size: 11px;
	outline: none;
}

.login
{
	float: right;
	display: block;
	padding: 5px;
	background-color: #002D6E;
	color: white;
	font-size: 11px;
	outline: none;
}

#header
{
	background-color: #000000;
	border: 1px solid #C0C0C0;
	border-bottom: none;
	width: 740px;
	line-height: 40px;
	text-align: center;
	margin-left: auto;
	margin-top: 78px;
	margin-right: auto;
}

#header .text span
{
	font-size: 24px;
	font-family: Ek Mukta;
	color: #8E7CC3;
}

footer
{
	text-align: center;
	background-color: #191919;
	color: #FC9E00;
	font-family: Calibri;
	font-size: 16px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 64px;
	border-top-left-radius:.4em;
	border-top-right-radius:.4em;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}

W praktyce ma to wyglądać tak:

Tutaj ma być odtwarzany filmik

Wysokość górnego i dolnego tła z tymi ukośnymi paskami ma wynosić max 100px, czyli góra 100 i dół 100. Tło z tymi ukośnymi paskami mam już przygotowane w PNG, ale nie wiem jak zrobić, aby to wyglądało tak jak na obu powyższych obrazkach.

Mam 2 pytania:

1. Czy da się zrobić tak, aby tło z tymi ukośnymi paskami pojawiło się w górnej i dolnej części podstrony (tak jak na obu powyższych obrazkach)?

2. Czy da się zrobić tak, aby filmik był odtwarzany pomiędzy górnym a dolnym tłem tej podstrony?

Będę bardzo wdzięczny za pomoc.

komentarz zamknięcia: Problem został rozwiązany.

1 odpowiedź

odpowiedź 29 listopada 2017 przez EdeX Mądrala (5,110 p.)

mozesz ustawic tlo dla calej strony dodac diva pod spanem i w nim ustawisz jakis tam kolor tla i w tym divie dasz film.

komentarz 29 listopada 2017 przez Krzysiek_34 Mądrala (6,110 p.)

Taka wskazówka niewiele mi pomaga.

komentarz 30 listopada 2017 przez pablop76 VIP (123,180 p.)

Witam. To dobra wskazówka. Nie ma tu nic nad zwyczajnego. Ustaw wszystko po kolei tak jak narysowałeś na swoim layoucie.

	<ul>
		<li>lewy</li>
		<li>prawy</li>
	</ul>
		<div class="header">
			<h1>Elektronika</h1>
		</div>
		<div class="video">
			.....
		</div>
	<div class="footer">Elektronika &copy; 2017</div>

Daj tło na całe body. itemy listy daj jeden w lewo drugi w prawo. header daj border bez bottom. video tak jak EdeX napisał daj jakiś background a w nim film. footer wiadomo.

Problem pojawi się gdy zabraknie treści. Stopka nie będzie przylegać do doły strony, ale jest na to kilka sposobów. Osobiście wybrałbym ten z divem push

komentarz 30 listopada 2017 przez Krzysiek_34 Mądrala (6,110 p.)

Ale jak zrobić, aby wysokość górnego tła wynosiła powiedzmy 100px? Jak zrobić także, aby wysokość dolnego tła wynosiła powiedzmy 100px?

Umieszczenie filmiku pomiędzy dwoma tłami będzie mniejszym problemem.

komentarz 30 listopada 2017 przez pablop76 VIP (123,180 p.)
edycja 30 listopada 2017 przez pablop76

pozycjonując absolutnie div video od góry 100px; i od dołu 100px.

komentarz 30 listopada 2017 przez Krzysiek_34 Mądrala (6,110 p.)
edycja 30 listopada 2017 przez Krzysiek_34

Umieściłem ten zapis pomiędzy header a footer.

Zrobiłem coś takiego i nie ma żadnego efektu:

<div class="big_video">
</div>

body
{
	background: #000000 url("obrazki/background/body_background.png");
	font-family: Verdana;
	background-attachment: fixed;
	margin: 0;
	width: 100%;
	height: 495vh;
	position: relative;
}

.big_video
{
	position: absolute;
	top: 100px;
	bottom: 100px;
}

Próbowałem też innych wariantów i dalej nie było żadnego efektu. Ścieżka do tego tła z ukośnymi paskami jest podana prawidłowo na 100%. Jak to zrobić, aby pojawił sie efekt?

komentarz 30 listopada 2017 przez pablop76 VIP (123,180 p.)
edycja 30 listopada 2017 przez pablop76

<div class="container">
  <nav class="nav">
			<ul>
				<li><a href="#">Strona główna</a></li>
				<li><a href="#">Logowanie</a></li>
			</ul>
		</nav>
		<header class="header">
			<h1>Elektronika</h1>
		</header>
		<div class="video">
			<iframe width="360" height="115" src="https://www.youtube.com/embed/sFXAMrrD7Ec" frameborder="0" allowfullscreen></iframe>
		</div>
</div>
	<footer class="footer">Elektronika &copy; 2017</footer>

* {
	margin: 0;
	padding: 0;
	border: none;
}

html {
	height: 100%;
}

body {
	height: calc(100% - 5px);
	margin: 0;
	background-image: url("http://mojhovek.com.pl/background.png");
}

.container {
	min-height: calc(100% - 50px);
}

.header {
	width: 50%;
	height: 50px;
	margin: 0 auto;
	text-align: center;
	margin-top: 44px;
	background-color: #000;
	color: #fff;
	line-height: 50px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.nav {
	width: 60%;
	margin: 0 auto;
	margin-top: 5px;
}
.nav::after {
    content: "";
    clear: both;
    display: table;
}
.nav > ul {
	width: 100%;
	height: 50px;
	background-color: #C34F4F;
	text-align: center;
}

.nav > ul > li {
	display: inline-block;
	height: 40px;
}

.nav > ul > li:first-child {
	float: left;
	margin-left: 5px;
}

.nav > ul > li:last-child {
	float: right;
	margin-right: 5px;
}
.nav > ul > li > a {
	display: block;
	line-height: 40px;
	margin-top: 5px;
	padding: 0 10px;
	background-color: #002D6E;
	text-decoration: none;
	color: white;
}

.video {
	width: 100%;
	position: absolute;
	top: 150px;
	bottom: 150px;
	background-color: grey;
}

iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.footer {
  display: block;
	width: 60%;
	margin: 0 auto;
	text-align: center;
	background-color: #191919;
	color: #FC9E00;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}