SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Video Questions

    First and foremost, yes I could spend 40 minutes digging through the forums to try and find information about this, but I have googled it for the past 20 and haven't come up with much. I also retain more information discussing things. And this is something I'd like to learn.

    Anyway, onto the problem... I really would like to replicate something as seen in https://www.desktimeapp.com/
    With the looped video in the background of a content header... I'm working with wordpress and I don't really understand how to accomplish this.

    Thanks,
    -Lane

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Lane. In essence, this looks pretty simple. There is and HTML5 <video> element, with two divs placed over the top of it. The video is set to position: fixed and has opacity set on it to make is seem semi transparent.

    For some reason, the site is using JS to serve up the video, which isn't really necessary, so I'm not sure why they are doing that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Lane. In essence, this looks pretty simple. There is and HTML5 <video> element, with two divs placed over the top of it. The video is set to position: fixed and has opacity set on it to make is seem semi transparent.

    For some reason, the site is using JS to serve up the video, which isn't really necessary, so I'm not sure why they are doing that.
    That is just the answer I was looking for at the time! Thanks so much!

    I'm having trouble understand what my problem is though. I need to display a <div> over the video that has a background color (and transparency) like they did in the site above.
    My current HTML markup is
    Code:
    			<div id="video-container">
    				<div id="head-video">
    					<video class="head-video"	src="/wp-content/themes/bones/library/images/splash.mp4" autoplay muted loop></video>
    				</div>
    				<div id="left-video">
    				</div>
    				<div id="right-video">
    				</div>
    			</div>
    With my CSS as follows
    Code:
    #video-container	{
    
    	}
    #head-video	{
    	top: 300px;
    	height: 400px;
    	overflow: hidden;
        z-index:0;
    	}
    video.head-video	{
    	width: 100%;
    	}
    #left-video {
    	background-color: #333333;
        top:0;
        left:0;
        z-index:1;
    	}
    #right-video {
    	float: right;
    	display: none;
    	}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I guess we'd need to know more specifically what you need here, as there are lots of considerations. This is a rough experiment, and probably has a lot of flaws, but I don't know what I'm aiming for ...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    body {margin: 0; padding: 0;}
    
    .video-container	{
        width: 100%;
        height: 400px;
        position: relative;
        overflow: hidden;
    }
    
    video {
    	width: 100%;
    }
    
    .left {
    	background: rgba(51,51,51,0.2);
    	left: 0;
    }
    
    .right {
    	background: rgba(0,200,215,0.2);
    	right: 0;
    }
    
    .video {
    	height: 400px;
    	width: 50%;
    	position: absolute;
    	top: 0;
    	text-align: center;
    	color: white;
    	font-size: 3em;
    }
    
    </style>
    </head>
    <body>
    
    <div class="video-container">
    	<video src="/wp-content/themes/bones/library/images/splash.mp4" autoplay muted loop></video>
    	<div class="video left">
    	text
    	</div>
    	<div class="video right">
    	text
    	</div>
    </div>
    	
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •