Learn how to create captivating web designs with full screen videos and text overlays using HTML and CSS. Modernize your site's look today!
Table of Contents
In the world of modern web design, creating an impactful and visually stunning experience for your visitors is paramount. One technique that has gained significant attention is the fusion of full screen videos and captivating text overlays. By seamlessly integrating these two elements using HTML and CSS, you can take your website's aesthetics to a whole new level.
Imagine a website that immediately grabs your attention with a captivating full screen video background. Now, envision text that elegantly floats over the video, delivering a clear message or call to action. This combination not only adds a touch of sophistication but also engages visitors in a way that static images or plain text simply cannot achieve.
In this tutorial, we will delve into the art of creating a full screen video with a text overlay using HTML and CSS. Whether you're a seasoned web developer looking to enhance your skill set or a creative individual seeking to make your online presence stand out, this guide is tailored to provide you with the necessary tools and knowledge.
Throughout the following sections, we'll break down each step of the process, from setting up the HTML structure to styling and animating the text overlay. By the end of this journey, you'll have the expertise to design a web page that seamlessly integrates dynamic visuals and informative text, leaving a lasting impact on your audience.
So, if you're ready to embark on a creative adventure that combines the power of full screen videos with the finesse of text overlays, let's dive in and unlock the potential of this captivating web design technique.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our video with text overlay.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
<!DOCTYPE html>: This declaration specifies that the document type is HTML5.
<html lang="en">: The opening tag for the HTML document. The lang attribute specifies the language of the document, which is set to English ("en").
<head>: The head section of the HTML document. This is where meta information and external resources are defined.
- <title>: Sets the title of the webpage that appears in the browser's title bar or tab.
- <meta charset="UTF-8" />: Specifies the character encoding for the document, which is set to UTF-8, a widely used character encoding that supports various languages and characters.
- <meta name="viewport" content="width=device-width, initial-scale=1">: Defines the viewport settings for responsive design. It sets the initial scale to 1 and adjusts the content width to the device's width.
- <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap" rel="stylesheet">: Links to the Google Fonts stylesheet for the "Raleway" font in two weights (400 and 900).
- <link rel="stylesheet" href="styles.css" />: Links to an external CSS stylesheet named "styles.css" for additional styling of the webpage.
<body>: The body section of the HTML document, where the visible content of the webpage is defined.
<header class="video-header">: Defines a header section with a class name "video-header". This is where the video background and text overlay will be contained.
<video src="http://thenewcode.com/assets/videos/ocean-small.mp4" autoplay loop playsinline muted></video>: Embeds a video element with the source set to "http://thenewcode.com/assets/videos/ocean-small.mp4". The video has attributes:
- autoplay: The video will start playing automatically when the page loads.
- loop: The video will loop playback continuously.
- playsinline: Ensures inline playback on iOS devices.
- muted: The video's audio is muted.
<div class="header-text">: A container div for the text overlay on top of the video.
<h1>: A heading element containing the text "Exploring" followed by a nested <span> element containing the text "The Sea". This creates a visual effect with different styling for the spanned text.
<div class="description">: Another container div for a description text.
<p>: A paragraph element containing the description text explaining how the full-screen video effect is achieved using CSS techniques.
This is the basic structure using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the component is in place, the next step is to add styling to the component using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our component.
Let's break down each section of the code:
1. html, body: This selector targets both the html and body elements. The following properties are applied to these elements:
- font-family: 'Raleway', sans-serif;: This sets the font family for text within the html and body elements to 'Raleway', which is a sans-serif font. If 'Raleway' is not available, the browser will use a generic sans-serif font.
- background-color: teal;: This sets the background color of the entire HTML document to a shade of teal.
2. video: This selector targets video elements within the document. The following properties are applied to these elements:
- width: 100dvw;: The width of the video is set to 100 "viewport width" units (100% of the viewport's width).
- min-height: 100dvh;: The minimum height of the video is set to 100 "viewport height" units (100% of the viewport's height).
- position: absolute;: The video is positioned absolutely within its containing element.
- top: 0;: The video is aligned to the top of its containing element.
- left: 0;: The video is aligned to the left of its containing element.
- object-fit: cover;: The video content is scaled and cropped to cover the entire area of the video element while maintaining its aspect ratio.
3. .header-text: This class selector targets elements with the class header-text. The following properties are applied to elements with this class:
- position: absolute;: The elements are positioned absolutely within their containing element.
- color: white;: The text color of the elements is set to white.
- display: flex;: The elements are displayed as flexible boxes.
- flex-direction: column;: The flexible box layout is set to have a column orientation.
- justify-content: center;: The content within the flexible box is vertically centered.
- text-align: center;: The text within the elements is centered horizontally.
- transform: translateY(-5rem);: The elements are moved 5 "rem" units upwards, effectively placing them above their original position.
- top: 0; bottom: 0; left: 0; right: 0;: These properties expand the elements to cover the entire width and height of their containing element.
4. .header-text h1: This targets h1 elements within elements with the class header-text. The following properties are applied:
- font-weight: 400;: The font weight of the h1 elements is set to 400 (normal).
- font-size: 1.75rem;: The font size of the h1 elements is set to 1.75 "rem" units.
- text-transform: uppercase;: The text within the h1 elements is transformed to uppercase.
- line-height: 1;: The line height of the h1 elements is set to 1.
5. .header-text span: This targets span elements within elements with the class header-text. The following properties are applied:
- display: block;: The span elements are displayed as block-level elements.
- font-weight: 900;: The font weight of the span elements is set to 900 (bold).
- font-size: 6rem;: The font size of the span elements is set to 6 "rem" units.
6. .description: This class selector targets elements with the class description. The following properties are applied to elements with this class:
- position: absolute;: The elements are positioned absolutely within their containing element.
- bottom: 0; left: 0; right: 0;: These properties expand the elements to cover the entire width at the bottom of their containing element.
- margin: auto;: The elements are centered horizontally using auto margins.
- color: white;: The text color of the elements is set to white.
- background-color: hsl(181deg 50% 20% / 70%);: The background color of the elements is a semi-transparent dark color using HSL values.
- padding: 2rem;: The elements have a padding of 2 "rem" units.
7. .description p: This targets p elements within elements with the class description. The following properties are applied:
- max-width: 40rem;: The maximum width of the p elements is set to 40 "rem" units.
- margin-inline: auto;: The p elements are centered horizontally using inline margins.
- line-height: 1.6;: The line height of the p elements is set to 1.6.
This will give our full screen video with text overlay component an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html, body {
font-family: 'Raleway', sans-serif;
background-color: teal;
}
video {
width: 100dvw;
min-height: 100dvh;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
.header-text {
position: absolute;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
transform: translateY(-5rem);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.header-text h1 {
font-weight: 400;
font-size: 1.75rem;
text-transform: uppercase;
line-height: 1;
}
.header-text span {
display: block;
font-weight: 900;
font-size: 6rem;
}
.description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: white;
background-color: hsl(181deg 50% 20% / 70%);
padding: 2rem;
}
.description p {
max-width: 40rem;
margin-inline: auto;
line-height: 1.6;
} Final Output:
Conclusion:
In conclusion, mastering the art of creating a full screen video with an engaging text overlay using HTML and CSS can greatly elevate your web design game. By seamlessly merging captivating visuals and informative text, you can create a website that not only looks modern and stylish but also effectively communicates your message.
Throughout this tutorial, we've explored the step-by-step process of achieving this dynamic effect. From structuring your HTML with semantic elements to embedding a video background that covers the entire viewport, you've learned the foundational elements of this technique.
The magic truly happens with CSS. By strategically positioning the text overlay on top of the video and carefully selecting fonts, colors, and sizes, you can ensure that your message stands out while maintaining readability. And don't forget to add a touch of animation to make the text come alive and engage your visitors.
In the ever-evolving landscape of web design, responsiveness is key. With media queries, you can adapt your creation to look stunning on devices of all sizes. Whether your audience is viewing your site on a desktop, tablet, or smartphone, your full screen video with text overlay will remain visually appealing and functional.
So, go ahead and experiment with this technique. Let your creativity flow as you craft unique and captivating web experiences. By following the steps outlined in this tutorial, you're well-equipped to incorporate full screen videos with text overlays into your projects, leaving a lasting impression on your audience.
Embrace the fusion of multimedia and design, and watch your websites transform into immersive, modern masterpieces. With the power of HTML and CSS at your fingertips, there's no limit to what you can create. Happy designing!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
