Currently immersed in an HTML and CSS project, I aim to showcase a captivating background video sourced from Pexel that occupies the entire top section of the screen above the "hello" and "meet the team" sections (excluding the navbar). While my Codepen link is available below, here are the key areas where I suspect my errors lie.
HTML:
<div class="all">
<head id="home">
<div id="welcome-section">
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="pexels-magda-ehlers-5306154.mp4&" type="video/mp4">
</video>
<div class="content">
<h1>Hello</h1>
</div>
</div>
CSS:
html, .all {
margin:0;
height:100%;
box-sizing:border-box;
background-image: url("https://m.media-amazon.com/images/I/41g8yeF0NWL._AC_.jpg");
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
}
#welcome-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
font-size:50px;
color:white;
height:100vh;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.content {
position: relative;
height: 100vh;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
Despite referencing these resources, I'm facing difficulties in getting the video to appear. Any guidance or support would be greatly appreciated!
Codepen:https://codepen.io/coder3o2-4/pen/ExXYeRY
Relevant Links:
https://css-tricks.com/full-page-background-video-styles/
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp