[BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

[Emetophobic]

Once again,
I'm here to release an old index I made for CokeDEV. We don't use it anymore and since my work have been released anywhere in the french community, I give it away to finally stop kiddies making fame with it.

Screenshot (Sorry I pasted an image link that was only accessible to me):
https://www.dropbox.com/s/6xdg9on1nu...2018.11.29.png

I must admit that this design is very similar to my previously released one (Colorful 2) but since it was for an hotel and not to take care of my portfolio.
Something particular with this index is that I used the video tag from HTML5 to actually make it a background. If you want to change the video file search for

<video id="media_landing_background" src="./web-gallery/v4/media/cokedev_media_landing.mp4" autoplay muted loop>

and change the src path like you would do for any image tag. But be careful, there's no video buffering which means the client will have to buffer the entire file clientside in order to get the background. So please compress the most your video file.

Sorry for the language btw (It's French)
But the left part is depending on your hotel specific features so it doesn't need precise translation.

Here's a quick translation for the login part:

<div class="col-md-6" style="padding: 80px;">
					<div class="panel panel-default" style="margin-top: -45px;">
						<div class="panel-heading">
							<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Sign in</h3>
						</div>
						<div class="panel-body">
							Already registered on {hotel_name}? Sign in!
							<form action="tologinscript.php" method="post">
								<input id="username" type="text" placeholder="Username">
								<input id="password" type="password" placeholder="Password">
								<input type="submit" class="btn btn-primary" value="Sign in" style="width: 160px;">
							</form><br>
							<p style="color: #FFF; background-color: #ffbe00; padding: 7px; border-radius: 3px;"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;&nbsp;Notice that you're not in an official hotel, please use different passwords from
							your real Habbo account.</p>
						</div>
						<div class="panel-heading">
							<h3 class="panel-title"><i class="fa fa-plus"></i> Register</h3>
						</div>
						<div class="panel-body">
							If you don't have any account on {hotel_name}, join us! It takes 2 minutes.
							<a href="#" class="btn btn-lg btn-success btn-register">Join the party!</a><a href="#" class="btn btn-lg btn-primary btn-register"><i class="fa fa-facebook"></i> Facebook login</a><a href="#" class="btn btn-lg btn-danger btn-register"><i class="fa fa-google-plus"></i>Sign in with Google+</a>
						</div>
					</div>
				</div>

Download (Lifetime link from Dropbox):
https://www.dropbox.com/s/sttmpghx49...EV%20Index.rar

Cheers,
Jérémy 'Emetophobic' Castellano

[MentaL]

[LeChris]

Thanks. I will be using on CryRP

[The General]

Image is broken for me.

[Emetophobic]

Image is broken for me.

What do you mean by that?

[Lagan]

What do you mean by that?

He means the image that you posted on the board is down.

[Emetophobic]

He means the image that you posted on the board is down.

Fixed

[Komakech]

I guess it's a nice concept, just the fact that you have to compress the file so much to make it load quickly that your quality loss is almost too much.. I mean you can get ahi-res background image (not tiled) and compressed it to around 800kb which is still relatively large and on slow connections can take a while to load, unless your video is 5 seconds long you couldn't really match that file size. Considering it's covering the entire background means you'd need to have a video of 1920x1080 resolution for it to look nice...

As a person who has to encode videos from raw footage into mp4 files and compress them, I don't think this concept is a good one, only because of the huge filesize you'd end up having. Perhaps consider having a content box on the index that has a static image on-top, when you put your cursor over it hides the image and starts the video, that way it'll be able to buffer before being used, it'd also mean you don't need it to be such a high resolution saving a lot of users their bandwidth.