What is the best way to position an image on top of a video header?

I currently have an image header, but I would like to incorporate a video while adding some text on top as a logo. Here is some inspiration for what I am looking for: 

<div class="video-container">
   <video autoplay loop muted>
         <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">

   </video>
 <div class="overlay-desc">
    <h1>Wayne's World</h1>
    </div>
    </div>

     body {
    background: #333;
    }
     .video-container {
     position: relative;
     }
     video {
    height: auto;
    vertical-align: middle;
   width: 100%;
    }
   .overlay-desc {
    background: rgba(0,0,0,0);
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   display: flex;
  align-items: center;
  justify-content: center;
  }
jqueryhtmlcss

Answer №1

If you want to add your own text to a video, simply insert it into the <h1> tag within the code snippet below. In the example provided from Codepen, the creator placed text over the video by using a div called "overlay-desc".

To customize the video with your own content, replace the text in the <h1> tag and update the video source link accordingly.

Here is the basic structure without any specific content:

<div class="video-container">
   <video autoplay loop muted>
      <source src="YOUR LINK HERE" type="video/mp4">
   </video>

   <div class="overlay-desc">
      <h1>YOUR TEXT HERE</h1>
   </div>
</div>

Make sure to retain the CSS styles provided.

EDIT

If you'd like to overlay an image (such as a logo) on top of the video, adjust the HTML structure as shown below:

<div class="full-containter">
   <div class="img-container"><img src="YOUR IMAGE URL"/></div>
   <video autoplay muted loop>
      <source src="YOUR VIDEO SOURCE" type="video/mp4">
   </video>
</div>

Feel free to experiment with the CSS styles to achieve the desired effect. Different approaches like float or z-index can be used. As a starting point, consider the following CSS:

.full-container {
  height: 100vh;
}

video {
  position: relative;
}

.img-container {
  height: 50px;
  position: absolute;
}

We hope this additional information is helpful for your project!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Is it possible to use a variable to dynamically set the attribute value of an HTML Object element in Angular 8?

Browser: Chrome In my HTML and Typescript files, the code looks like this: source.html <object class = "page" data = "www.google.com" ></object> source.ts import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlangularangular-material

Tapping into the power of jQuery

I am struggling to achieve the desired effect of clicking on an element and having it return to its original state with another click. I attempted writing additional code for a second click, but it didn't produce the intended outcome. The toggle featu ...

javascriptjquery

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

javascripthtmlcss

Mobile site experiencing owl.carousel responsiveness issues after refreshing the page

I am currently working on a website located at . On the homepage, right after the slider, there is a carousel of three info boxes. However, in mobile view (developer mode), after a hard refresh or viewing the link on an actual mobile device, it displays a ...

javascripthtmlcss

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

htmlcssbootstrap-4

What is the best way to give CKEditor 5 focus using jQuery?

After creating a CKEditor field and initializing it as shown below: ClassicEditor .create(document.querySelector('#note}')) .then(editor => { noteEditor = editor; }) .catch( error => { ...

javascriptjqueryckeditorckeditor5

The Link Breaks the Overlay Hover Effect

Currently, the code functions as intended when you hover over or touch the thumbnail, an overlay will appear. The issue lies in the fact that to navigate to a specific URL, you have to click directly on the text. The overlay itself is not clickable and ca ...

javascripthtmlcsswordpress

Demonstrating how to show Texbox contents with Jquery

I am currently facing an issue with displaying the value of a textbox server control in a text area within an Asp.Net Webform. On button click, the value is not populating in the text area as expected. I suspect it may be related to a server control run- ...

jqueryasp.netwebforms

jQuery is implemented prior to the completion of HTML loading

Is there a way to ensure that HTML content loads before executing a JavaScript function? $(document).ready(function() { var x = 10; if(x == 10) { $('h1').text("Its changed !"); alert("Test"); } }) <h1>Hello< ...

javascriptjquery

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Closed. This question is opinion-based. It is not currently accepting answers. Lo ...

javascripthtmliframe

I have a professional sales page showcasing data from a JSON file. My goal is to efficiently transfer details for a single listing to a separate results page

My main PHP file, index.php, successfully displays listings from a JSON file. However, I am having trouble sending the details of a single listing from this page to another page (result.php). How can I showcase the details of this individual listing on the ...

javascriptphpjqueryjsonwordpress

What is the technique of passing objects using jQuery's ajax function?

I'm trying to send an object to a controller action, but it's not working. The object is null with no errors. I've debugged it and confirmed that the parameters are being passed correctly. scripts $(document).ready(function () { var Irregu ...

jqueryajaxasp.net-mvc

Is there a way to determine the dimensions of an element that is set to "display: none"?

Is it possible to retrieve the dimensions of child elements inside a div that has been hidden with CSS property display: none? If so, how can this be achieved? Check out the Fiddle Demo here var o = document.getElementById('output&apos ...

javascripthtmlcss

What is the best way to extract data from a jQuery JSON response that is wrapped in an object

Can someone help me with parsing a JSON answer that has the following structure? { "TariffItems": [ { "TariffId": "89", "TariffCode": "Y", "TariffRusName": "Эконом" }, { "Ta ...

javascriptjqueryjson

Executing a simulated onClick event in jQuery

Attempting to create a simulated onclick event on a drop-down menu has proved challenging for me. An IE object is being used to navigate to a page, where I need to modify a dropdown menu that contains an onchange event: $('select[name="blah"]') ...

javascriptjquery

Choosing containers as found in the Firefox debugging tool

I'm currently working on developing a container selector similar to the one found in Firefox's debug tools (press ctrlshift+C). The main goal is to retrieve a list of selected elements for further manipulation. Here is my current progress: http ...

javascriptjquerycssjquery-events

JavaScript behavior differs in HTML form based on browser compatibility, resulting in "NaN" error in IE but functioning properly in Chrome

Although I may not be a skilled programmer, I was able to make this work in Chrome successfully. However, when I attempted it on IE (specifically version 11), I encountered an issue where it displayed "NaN." The script essentially takes four criteria and ...

javascripthtmlforms

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

phpjavascriptjqueryhtmlmysql

``How can I align a menu bar to the center of the page

Creating a navigation bar for my website and aiming to center it. Below are the style and HTML files I'm using: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); #cssmenu, #cssmenu ul, #cssmenu ul li, ... <html> <head ...

htmlcss