lukt mijn niet helemaal

Status
Niet open voor verdere reacties.
ciske de rat

ciske de rat

Verenigingslid
Lid geworden
10 jun 2003
Berichten
964
ik ben met pagina bezig met op de achtergrond een video draaien
helaas krijg ik de video niet mooie in beeld
ik moest al een en ander aan passen maar hij moet nog iets verder omhoog

html
HTML: 
<!DOCTYPE HTML>
<html>
    <head>
		<title>Hoekschewaard Role Play</title>
		<link href="style.css" rel="stylesheet" type="text/css"/>
		<script src="config.js" type="text/javascript"></script>
		<script src="script.js" type="text/javascript"></script>
    </head>
	
    <body onload="BG.loadPage()">		
		<div class="logo-preview">
			<img id="logoImgP" src="img/logo.png"/>
		</div>
		<div id="content" style="opacity: 0;">			
			<div class="video-background">
				<div class="video-foreground" id="videoLink">
				<video width="2000" height="1500" autoplay>
                <source src="http://moffia.nl/web1/video/gtav.mp4" type="video/mp4">
  
                 Your browser does not support the video tag.
</video>
					
				</div>
				<div id="videoOverlay"></div>
			</div>		
			<div class="main-menu">
				<div class="item-menu" data-active='1' onclick="BG.clickPage(this, 'home')">Home</div>
				<div class="item-menu" data-active='0' onclick="BG.clickPage(this, 'news')">News</div>
				<div class="item-menu" data-active='0' onclick="BG.clickPage(this, 'rules')">rules</div>
				<div class="item-menu" data-active='0' onclick="BG.clickPage(this, 'contacts')">contacts</div>				
				<div style="height: 10px;"></div>
				<div class="music-content">
					<div class="volume-bar">
						<img id="iconVolume" src="./img/icons/volume-mute.png" onclick="V.onClickMute(this)"/>
						<input id='sliderVolume' class="slider" type="range" min="0" max="1" step=".05" value="0" onchange="V.onChangeVolume(this)" onmousemove="V.onChangeVolumeMouseSlider(this)"/>
						<audio id="audioblock"></audio>
					</div>
					<div id="audioName"></div>
				</div>
			</div>
			<div id="contentPage">
				<div id="headPage"></div>
				<div id="pagenews" class="item-page">
					<div class="warp-news custom-slider" id="warpNews"></div>
				</div>
				<div id="pagerules" class="item-page">
					<div class="warp-rules custom-slider" id="warpRules"></div>
				</div>
				<div id="pagecontacts" class="item-page">
					<div class="warp-contacts custom-slider" id="warpContacts"></div>
				</div>
				<div class="footer-page">
					Hoekschewaard Role PLay
					<img style="width: 70px; height: 70px;" src="img/logo.png" alt=""/>
				</div>
			</div>
			<canvas class="mouse-bubbles"></canvas>
		</div>
		<div class="loadbar">
			<div id="progressBar"></div>
		</div>
		<script src="load_bar.js" type="text/javascript"></script>
    </body>
</html>

dat hebben we hier de stijl
HTML: 
@font-face {
    font-family: Natural Mono Regular;
    src: url('.//NaturalMonoRegular.ttf');
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	
    cursor: none;
    user-select: none;
	color: rgb(255,255,255);
    font-family: Natural Mono Regular;
    background-color: rgb(25,25,25);
	overflow: hidden;
}

.logo-preview{
	position: absolute;
	top: 150px;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	
	width: 100%;
	height: 100%;
}
#logoImgP{
	transition: all 0.7s ease 0s;
	height: 512px;
}

#content{
	position: top;
	display: block;
	width: 100%;
	height: 100%;
	transition: all 0.6s ease 0s;
}

/* MENU */
.main-menu{
	position: absolute;
	top: 100px;
	left: 50px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}
.item-menu{
	text-transform: uppercase;
	font-size: 36pt;
	padding: 15px 0px;
	text-shadow: 0px 0px 15px black, 0px 0px 15px black;
	transition: all 0.5s ease 0s;
}
.item-menu:hover{
	text-shadow: 0px 0px 35px black, 0px 0px 35px black;
	padding-left: 10px;
	color: rgb(20,190,190);
}
.item-menu[data-active="1"] {
	text-shadow: 0px 0px 35px black, 0px 0px 35px black;
	padding-left: 10px;
	color: rgb(0,255,255);
}

/* PAGE */
#contentPage{
	position: absolute;
	right: -80%;
	
	width: 80%;
	height: 100%;
	transition: all 1s ease 0s;
	overflow: hidden;
    background-color: rgba(25,25,25, .90);
}
.item-page{
	display: flex;
	flex-direction: column;
	
	height: calc(100% - 170px);
	width: 100%;	
}
#headPage{
	font-size: 36px;
	line-height: 100px;
	padding-left: 20px;
	text-transform: uppercase;
}
.footer-page{
	display: flex;
	justify-content: center;
	align-content: center;
	
	font-size: 28px;
	line-height: 70px;
	padding-left: 20px;
	text-transform: uppercase;
}
/* news */
.item-news{
	display: flex;
	
	border-left: 2px solid rgba(0,255,255,.4);
	width: calc(100%-2px);
    background-color: rgb(23,23,23);
}
#newsImg{
	height: 250px;
	border-right: 2px solid rgba(0,255,255,.4);
	border-top: 2px solid rgba(0,255,255,.4);
	border-bottom: 2px solid rgba(0,255,255,.4);
}
.news-info{
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 70px;
	width: 100%;
}
.news-head{
	display: flex;
	flex-direction: row;
	align-content: center;
	padding-bottom: 15px;
}
.news-head-title{
	font-size: 23px;
	width: 50%;
    color: rgba(0,255,255,0.8);
}
.news-head-data{
	font-size: 20px;
	width: 50%;
	text-align: right;
    color: rgba(0,255,255,0.8);
}
.news-text{
	user-select: text;
	padding-bottom: 15px;
}

/* RULES */
.item-rules{
	display: flex;
	flex-direction: column;
	width: 100%;
}
.rules-tittle{
	padding: 20px 0px;
	font-size: 24px;
    color: rgba(0,255,255,0.8);
}
.rules-text{
	user-select: text;
	font-size: 19px;
	line-height: 23px;
}

/* CONTACT */
.item-contact{
	display: flex;
	flex-direction: row;
	
	overflow: hidden;
	width: 100%;
	height: 200px;
    background-color: rgb(23,23,23);
}
.contact-avatar{
	border-radius: 10%;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all 0.4s ease 0s;
}
.contact-avatar:hover{
	opacity: 1;
}
.contact-info{
	padding: 0px 23px;
	height: 100%;
}
.contact-name{
	user-select: text;
	font-size: 32px;
    color: rgba(0,255,255,0.8);
}
.contact-place{
	font-size: 24px;
	color: rgb(180,180,180)
}
.contact-description{
	padding-top: 15px;
	font-size: 16pt;
	width: 100%;
	color: rgb(180,180,180)
}

/* CUSTUM SLIDER -CHROME */
.custom-slider{
	overflow-y: scroll;
	padding-left: 30px;
	padding-bottom: 30px;
}
.custom-slider::-webkit-scrollbar {
	width: 4px;
    height: 4px;
}
.custom-slider::-webkit-scrollbar-thumb { /* 5 - ползунок */
    background-color: rgba(0,255,255,.6);
	border-radius: 12px;
}

/* VIDEO */
#videoOverlay{
	position: absolute;
	top: 100;
	left: 0;
	width: 100%;
	height: 100%;
	
	box-sizing: border-box;
	transition: all 1s ease 0s;
    background: rgba(20,20,20, 0);
}

.video-background {
	position: top;
	top: 0; 
	right: 0; 
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;
	box-sizing: border-box;
	pointer-events: none;
}

.video-background iframe {
	position: top;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

@media (min-aspect-ratio: 16/9) {
	.video-foreground {height: 300%; top: -100%;}
}

@media (max-aspect-ratio: 16/9) {
	.video-foreground {width: 350%; left: -100%;}
}

/* MUSIC BAR */
.music-content{
	display: flex;
	flex-direction: column;
    width: 100%;
}
#audioName{
	font-size: 16px;
	line-height: 30px;
}
.volume-bar{
	display: flex;
	flex-direction: row;
	align-items: center;
    width: 100%;
}
#iconVolume{
    height: 32px;
    width: 32px;
	padding-right: 10px;
}
input[type=range].slider{
    -webkit-appearance: none;
    width: 75%;
    height: 10px;
    cursor: none;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.8);
    background: rgba(255,255,255, .8);
}
input[type=range].slider::-webkit-slider-runnable-track{}
input[type=range].slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    border-radius: 10px;
	border: 1px solid rgb(255,255,255);
    box-shadow: -407px 0 0 400px rgba(0,255,255,.75);
    background-color: rgb(245,245,245);
}
/* LOADING BAR */
.loadbar{
	position: absolute;
	bottom: 0px;
    width: 100%;
    height: 3px;
	box-shadow: 0 0 16px rgba(0,0,0,0.7);
    background: rgb(90,90,90);
}
#progressBar{
    height: 100%;
    width: 80%;
	transition: all 0.1s ease 0s;
	border-top-right-radius: 55px;
    background: linear-gradient(210deg, rgb(0, 255, 255) 0%, rgb(55, 155, 155) 100%);
}
/* cursor */
.mouse-bubbles{
	position: fixed;
	z-index: 99;
	pointer-events: none;
}

wat moet ik doen dat de video op de juist plek komt de breedte is goed allen de video staat iets te ver naar beneden
 
Hoe ziet het er nu uit? Heb je een voorbeeld in bijv. JSfiddle?

Enne, waarom gebruik je geen https?
 
Dan is er niks nis met https. Als je bestanden, zoals video's via het onveilige http-protocol inlaadt op een SSL-beveiligde URL, Dan heb je kans dat niet elke browser de video wilt openen.
 
Aar zei:
Dan is er niks nis met https. Als je bestanden, zoals video's via het onveilige http-protocol inlaadt op een SSL-beveiligde URL, Dan heb je kans dat niet elke browser de video wilt openen.
Klik om te vergroten...

ik wordt gek lol ik ben die pagina aan het aan passen en in eens laad hij niks meer in of hij laad het totaal verkeerd in locale pc de index.html open laad hij alles goed zien via edge laat hij de vorige versie in en in chrome wil hij niet door laden
 
deze zelfde pagina local host wordt wel goed weer gegeven in chrome bij edgge dan laad allebei goed in
 
We hebben hier ook een bewerk-mogelijkheid in dit topic zodat je niet hoeft te dubbelposten.
Ook interpuncties mogen wel in je bericht om het wat leesbaarder te maken.
;)
 
sorry aar,
dislectie heeft de overhand bij mijn wat ik denk schrijf ik
probeer me best te doen om verwordelijke op te schrijven
 
laat ik zo zeggen er staat nu de orginele youtube video in
deze bestaat niet meer nu heb ik zef een mp4 filmpje
wat ik er in wil hebben

HTML: 
<video width="2000" height="1500" autoplay>
                <source src="http://moffia.nl/web1/video/gtav.mp4" type="video/mp4">
  
                 Your browser does not support the video tag.
</video>

gaat wel maar andere dingen van de website laden niet meer
of werken niet meer
voorheen stond dit er in
HTML: 
<iframe id="videoMedia" src="https://www.youtube.com/embed/aLlDGzQK-p4?autoplay=1&%3Fvq=hd720;controls=0;&amp;showinfo=0&loop=1&mute=1&rel=0&playlist=aLlDGzQK-p4" frameborder="0" allow="autoplay" allowfullscreen></iframe>
 
Ik zie die eigen video er niet in staan, maar enkel een YT-embed.

Houd je wel rekening met mensen met een beperkt dataverkeer? Niet iedereen heeft zin om 14 MB binnen te hengelen op een mobiel abonnement of beltegoed.
Idem dito voor YouTube.

Houd het bij een korte video van +/- 10 seconden, of plaats de video elders op de site zodat ze zelf de video kunnen bekijken.
 
Aar zei:
Ik zie die eigen video er niet in staan, maar enkel een YT-embed.

Houd je wel rekening met mensen met een beperkt dataverkeer? Niet iedereen heeft zin om 14 MB binnen te hengelen op een mobiel abonnement of beltegoed.
Idem dito voor YouTube.

Houd het bij een korte video van +/- 10 seconden, of plaats de video elders op de site zodat ze zelf de video kunnen bekijken.
Klik om te vergroten...

beste aar
inmiddels heb proefversie van dreamweaver te pakken ben er mee bezig om de pagina
om te gooien nu schijn ik geen fouten meer te hebben
in html nu in config bestand
ERROR: Parsing error: Unexpected token:
HTML: 
	contactsContent: [
        {avatar: 'http://moffia.nl/web1/img/john.png', title:'Willem De Neus#0064', status:'Server eigennaar', desc:'Schrijf me niet zonder dringende behoefte, ik ben hier te belangrijk voor ' },
        {avatar: 'http://moffia.nl/web1/img/wimel.png', title:'NVT', status:'Server Owner', desc:'lees eerst de rules voor je mij contracteerd' },
        {avatar: 'http://moffia.nl/web1/img/willem.png', status:'CO-Owner', desc:'lol pm me alleen  wanneer belangrijk is' }
    ],

de webiste is niet bedoelt voor doeleinde om op pagina te komen ik gebruik hem als intro van een game server die je niet op telefoon speelt
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan