I'm creating a website and I set a video for the website background.
The problem now is that when I try to insert the logo at the top of the website but the video blocks the image.
Image of my CSS
Current View of my Website
* { margin: 0; padding: 0; } .video-background{ position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width : auto; height: auto; z-index: -100; } media (min-aspect-ratio: 16/9){ .video-background{ width: 100%; height: auto; } } media (max-aspect-ratio: 16/9){ .video-background{ width: auto; height: 100%; } } .navigation{ margin: 10px 50px; height: 60px; }
<!DOCTYPE html>
<html>
<head>
<title>CSC1026: Tutorial Website</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<video autoplay loop class="video-background" muted plays-inline>
<source src="Workaholic.mp4" type="video/mp4">
</video>
<div class= "navigation">
<img src= "logo.png" class = "logo">
</div>
</header>
</body>
</html>
<header> needs position: relative and background: none
<video> and <img> need position: absolute and display: block
<img> needs background: none and z-index:(at least 1 greater than <video> z-index if any).
If you think you really need .navigation (you probably don't) -- add the same properties of <img> to it and adjust accordingly.
main {
position: relative;
top: 30vh;
left: 0;
width: 99vw;
height: auto;
}
header {
position: relative;
background: none;
width: 99vw;
height: auto;
}
img {
display: block;
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 15vw;
height: 30vh;
background: none;
}
video {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
}
<header>
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png">
</header>
<main>
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4' muted plays-inline autoplay loop></video>
</main>
Related
I am trying to display a full width video with an overlay text that sits centered on the video vertically and horizontally. The centered positioning should respond to changes in the viewport width such that it is always centered. Also I would like a "caption" (h2 tag in the example) to always display right below the video regardless to how the viewport is sized.
I have attached my sample code - any help appreciated.
Thanks
Dennis
<head>
<style>
.header-unit {
margin-top: 10px;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 25%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
}
</style>
</head>
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
Please update your css with this and check:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.header-unit {
margin-top: 10px;
height: 100%;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 50%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
I wanted to resize the image in such a way that the image gets resized according to the resolution of the screen it is being displayed on.
I found a code that does it perfectly :
<!DOCTYPE html>
<head>
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
background-color : black;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<img src="kara.jpg" align="right" />
</body>
</html>
At the center of this image I want to play a video, but since it's not a background image it wasn't possible.
But, using background-image in CSS I am not able to get the same effect that the above gives me.
I tried a combination of many properties like background-size , background-position etc. It just didn't give me the same kind of output.
Please help!
If you wanna it take exactly the same width and height of the image, you can write the following
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
background-color : black;
}
.image {
padding: 0;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
background : url(https://via.placeholder.com/150) no-repeat center center;
}
.image img{
opacity : 0;
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="image">
<img src="https://via.placeholder.com/150" />
</div>
</body>
</html>
else you can do it using position absolute, like the following
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
background-color : black;
}
.image {
padding: 0;
margin: 0 auto;
height: 100%;
width: 100%;
position : absolute;
top : 0px;
left : 0px;
background : url(https://via.placeholder.com/150) no-repeat top center;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
padding : 0px;
margin : 0px;
}
.container{
width : 100vw;
height : 100vh;
position : relative;
}
.container img{
width : 100%;
height : 100%;
display : block;
margin : 0px auto;
}
.container video{
width : auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="container">
<img src="https://via.placeholder.com/300" />
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>
I would suggest wrapping your image in a container that wont limit it and then center your video in that container:
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
background-color : black;
}
section {
padding: 0;
display: inline-block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
width: fit-content;
height: fit-content;
position: relative;
padding:0;
}
// I made up the video tag for the example, use what you need
video {
position: relative;
display: inline-block;
width: 800px; // example
margin: 0 auto;
height: 500px;. // example
top: calc(50% - 250px); // 500/2
}
</style>
</head>
<body>
<section>
<img src="kara.jpg" align="right" />
<video />
</section>
</body>
</html>
New to coding.
I've set a video to autoplay on the background of a website.
When I try to place an image on top, I encounter issues, specifically when attempting to center it horizontally.
The typical solution results in the image disappearing:
img.center {
display: block;
margin: 0 auto;
}
Here is my CSS for the logo:
.logo {
position: absolute;
margin-left: auto;
margin-right: auto;
height: 250px;
padding-top: 15px;
}
I need this logo to float on top of the background video with it styled as such:
#bgvideo {
position: fixed;
top: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
It is simple as this. Here is a working codepen.
HTML:
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#myImg {
position: absolute;
left: 0;
right: 0;
display: block;
margin: auto;
}
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I need to have some text centered within this video. I got rid of the container for the header, and the desired results are still in tact, so that works with me, but I've struggled to deal with centering this text!
<div class="video-container">
<video class="video" preload="true" autoplay = "autoplay" loop = "loop">
<source src="nyc.mp4" type="video/mp4"/>
</video>
<p class="center-block quote"> Test </p>
Styling:
.video-container {
position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}
Bootstrap has a built in helper class - .text-center
Try this: <div class="video-container text-center">
here a print screen
worked print screen
<!DOCTYPE html>
<html>
<body>
<style>
.center-block{text-align: center;}
.video-container {
position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}
</style>
<div class="video-container">
<video class="video" preload="true" autoplay = "autoplay" loop = "loop">
<source src="nyc.mp4" type="video/mp4"/>
</video>
<p class="center-block quote"> Test </p>
</div>
</body>
</html>
Use this
<p class="center-block quote" style="text-align:center;"> Test </p>
And also paste this one:
.video-container {
position:relative;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container video{
position: fixed;
top: 100%;
left: 100%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-100%, -100%);
}
.video-container{
justify-content: centre;
width: 100%;
height: 100%;
text-align: centre;
}