Skip to content

Latest commit

 

History

History
163 lines (142 loc) · 5.84 KB

video-background.md

File metadata and controls

163 lines (142 loc) · 5.84 KB
Raw
layout title desc hide_markbot extra_tutorials goal fork steps
lesson
Video background
Create a video background for the header of a website.
true
title url
Video slide deck
/courses/web-dev-5/video/
title url
Video & audio
video-audio
before no_image video video_poster notes
We’re going to look at creating a website banner that has a video as the background behind the text.
true
goal.jpg
label text
Type it, type it real good
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
title before folders
Set up the project
The forked & cloned starter repo has the images you need in the `images` folder and the content inside `index.html` that we’ll just wrap some tags around. **The CSS inside `main.css` is done for us—it just contains a few colours, and fonts—nothing too complex.**
label type
video-background
folder
label indent
index.html
1
label type indent
css
folder
1
label indent
grid.css
2
label indent
main.css
2
label indent
modules.css
2
label indent
type.css
2
label type indent
images
folder
1
label indent
sol.jpg
2
title before code_lang code_file code lines after
Write some HTML
Let’s write out the HTML we need to display the video and get it to play properly. Here’s the HTML tags we’ll wrap around the content to create the design we’re looking for.
html
index.html
⋮ </head> <body> <div> <div> <video muted loop autoplay poster="images/sol.jpg" src="https://assets.learntheweb.courses/web-dev-5/magnetic-connections.mp4"></video> </div> <div> <h1>The Sun</h1> <p>The Sun is the star at the center of the Solar System; a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process.</p> <a href="#">Learn more</a> </div> </div> </body> </html>
num fade
2-3
true
num fade
16-17
true
num text
7
The `<video>` tag has a bunch of attributes on it to look at: - `muted` — will prevent the video from playing any sound - `loop` — restart the video when it gets to the end - `autoplay` — start playing as soon as its ready—doesn’t work on all devices, especially mobiles - `poster=""` — a path to an image that will display while the video is buffering **Many modern browsers will not auto-play videos unless they’re set to muted—because auto-playing videos with sound are the absolute worst.**
We should see this in the browser: ![](html.jpg)
title before code_lang code_file code lines after
Style the video
Next up we’ll use a bunch of classes from Typografier & Modulifier to make the video background work properly. *Remember that `main.css` has a little bit of stuff for us already—specfically a few colours and the `font-family`.*
html
index.html
⋮ </head> <body> <div class="banner relative chop pad-t-2"> <div class="embed embed-4by3 absolute w-1 pin-cl"> <video class="embed-item" muted loop autoplay poster="images/sol.jpg" src="https://assets.learntheweb.courses/web-dev-5/magnetic-connections.mp4"></video> </div> <div class="max-length text-center relative zindex-1 pad-t-2 pad-b gutter-1-2"> <h1 class="yotta push-1-2">The Sun</h1> <p class="mega">The Sun is the star at the center of the Solar System; a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process.</p> <a class="btn btn-ghost mega" href="#">Learn more</a> </div> </div> </body> </html>
num fade
2-3
true
num fade
13-17
true
num fade
8
true
num text
5
The surrounding `<div>` tag will get these classes: - `.banner` — defined in `main.css` to add colours - `.relative` — makes it `position: relative` - `.chop` — adds `overflow: hidden` - `.pad-t-2` — for a little spacing
num text
6
We want the `<video>` to be responsive so it needs to become an embed container. Plus we’ll add a few classes to get it into the centre behind the text. - `.embed`, `.embed-4by3` — the video’s aspect ratio - `.absolute` — make this element `position: absolute` so we can move it around - `.w-1` — make its width `100%` - `.pin-cl` — position the video so it’s in the vertical centre of our banner
num text
7
Don’t forget to add `.embed-item` onto the `<video>` tag itself
num text
9
This is where much of the positioning is going to happen. - `.max-length` — will prevent the line-length from getting too long - `.text-center` — align the text and button to the centre - `.relative` — make this element `position: relative` so we can bring it to the front - `.zindex-1` — bring the element in front of the video - `.pad-t-2`, `.pad-b`, `.gutter-1-2` — some nice spacing
That’s it! We should have an autoplaying, looping video banner.