Pozycjonowanie div'ów

pytanie zadane 19 kwietnia 2018 w HTML i CSS przez tomecki Nowicjusz (240 p.)
edycja 19 kwietnia 2018 przez tomecki

Witam,
Tworzę interaktywne wideo i od razu mówię: proszę mi nie mówić, że są do tego programy, bo wiem, że są.
Wracając.
To jest mój kod:
https://pastebin.com/cbcrSGCGK
Codzi o to, że przyciski się nie skalują. Znaczy się, trochę tak, ale ja chcę, aby wszystko znajdowało sie w jednym div'ie - pudełko. W tym pudełku 95% wysokości to wideo, a 5% to przyciski img. Pause / Stop.
Dwa przyciski choice1 i choice2 wyświetlały się na dwóch połowach wideo i gdy zmniejszamy przeglądarkę, lub samego div'a to guziki zmniejszają się razem w tym i sa cały czas w tej samej pozycji względem wideo. Rozumiesz?
Tak wygląda na moim monitorze:

Tak wygląda po skalowaniu:

A ma wyglądac tak jak na początku tylko w mniejszej formie.
Błagam! Siedzę już nad tym 2 dzień i prosiłem dwóch kolegów o pomoc.
Proszę.

komentarz 19 kwietnia 2018 przez Mariusz08 Maniak (62,280 p.)

@media queries

komentarz 19 kwietnia 2018 przez tomecki Nowicjusz (240 p.)

Dziekuję, ale nie o to mi chodziło.

1 odpowiedź

odpowiedź 19 kwietnia 2018 przez Daniel90 Pasjonat (17,970 p.)

Możesz mi wysłać rar z tą stroną? Tak to ciężko sprawdzić jak nie widać obrazków etc na codepen czy jsfiddle.

komentarz 19 kwietnia 2018 przez tomecki Nowicjusz (240 p.)

Jasne, tutaj masz rar:
http://www.mediafire.com/file/bdfalvfnlfidnao/Video.zip

komentarz 19 kwietnia 2018 przez Daniel90 Pasjonat (17,970 p.)

Sprawdź czy takie coś może być

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Trzymaj!</title>
        <link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
		<style type="text/css">

			#wrapper {
				position: relative;
			}

			.choice1{
				position:absolute; 
				background-color: white;
				opacity: 0.5;
				top: 50%;
				left:10vw;
				font-family: 'Black Han Sans', sans-serif; 
				font-size:5vh;
				padding: 5px;
				z-index:3; 
				height: 5vh;
			}
			.choice2{
				position:absolute;  
				background-color: white;
				opacity: 0.5;
				top: 50%;
				right: 10vh;
				font-family: 'Black Han Sans', sans-serif; 
				font-size:5vh;
				padding: 5px;				
				z-index:2;
				height: 5vh;
			}
			span:hover{
				color:red;
				background-color:white;
				opacity: 1.0;
			}
			.before{
				float:left;
				height: 5vh;
			}
			.play{
				float:left;
				height: 5vh;
			}
			.pause{
				float:left;
				height: 5vh;
			}
			.video{
				 
				height: auto; 
				width:100%; 
				z-index:1;
			}
		</style>
	</head>
	<body onload="start();">
		<div id="wrapper">
        	<span onclick="playChoice1()" id="choice1" class="choice1">Choice 1</span>
        	<span onclick="playChoice2()" id="choice2" class="choice2">Choice 2</span> 
			<video id="video" name="video" autoplay class="video">
				<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
                Your browser does not support the HTML5 Video element.
			</video>
			<div>
				<img onclick="controlPlay(1)" class="before" id="before" src="ic_navigate_before_black_48dp_1x.png"></img>
				<img onclick="controlPlay(2)" class="play" id="play" src="ic_play_arrow_black_48dp_1x.png"></img>
				<img onclick="controlPlay(2)" class="pause" id="pause" src="ic_pause_black_48dp_1x.png"></img>
			</div>
		</div>
 		
		<script>
			var czas = 10;
			var linkWybor1 = 'http://www.html5videoplayer.net/videos/toystory.mp4';
			var linkWybor2 = 'http://www.html5videoplayer.net/videos/toystory.mp4';
			
			var vid = document.getElementById("video");
			var nowScene = '';
			var beforeLink = '';
			var play = false;
			var choice = false;
			var boolChoice1 = false;
			vid.ontimeupdate = function() {myFunction()};
            
			function start() {
				document.getElementById("choice1").style.display = "none";
				document.getElementById("choice2").style.display = "none";
				document.getElementById("play").style.display = "none";
				beforeLink = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
			}
			
			function myFunction() {
				if(boolChoice1 == false){
					if (vid.currentTime > czas) {
						vid.pause();
						choice = true;
						document.getElementById("choice1").style.display = "block";
						document.getElementById("choice2").style.display = "block";
						boolChoice1 = true;
					}
				}				
         	 }
			 function controlPlay(ID){
				if(choice == false){
					if(ID == 2){
						if(play == false){
							vid.play();
							document.getElementById("play").style.display = "none";
							document.getElementById("pause").style.display = "block";
							play = true;
						} else{
							vid.pause();
							document.getElementById("play").style.display = "block";
							document.getElementById("pause").style.display = "none";
							play = false;
						}
					} else{
						vid.setAttribute('src', beforeLink);
					}
				}
			 }
			 
             function playChoice1() { 
				choice = false;
             	vid.setAttribute('src', linkWybor1);
                document.getElementById("choice1").style.display = "none";
                document.getElementById("choice2").style.display = "none";
				beforeLink = nowScene;
				nowScene = linkWybor1;
             }
             function playChoice2() { 
				choice = false;
             	vid.setAttribute('src', linkWybor2);
                document.getElementById("choice1").style.display = "none";
                document.getElementById("choice2").style.display = "none";
				beforeLink = nowScene;
				nowScene = linkWybor2;
             }
		</script>
	</body>
</html>

komentarz 19 kwietnia 2018 przez Daniel90 Pasjonat (17,970 p.)

a i jeszcze do #wrapper dodaj width 80%

komentarz 19 kwietnia 2018 przez tomecki Nowicjusz (240 p.)

Największe podziękowania!
No dziękuję bardzo!
Ja myślałem nad tym 2 dni wraz z dwoma kolegami, a Ty to tak szybko "załatwiłeś".

Dziękuję!
Jestem Ci bardzo wdzięczny.