javascript - How to have video as background for the header

So is it possible to render a video as a background just for the header, lile that the video is played inside the border? And also the h1 must be infront of the video. Is it even possible? Im trying to figure it out for hours ...

*   {
    box-sizing: border-box;
}
body {
    background-color: black;
    margin: 5px;
}
header h1{

    position: absolute;
    border: 1px solid black;
    background-color: black;
    padding: 2px;
    left: 50%;
    transform: translate(-50%);
}
header {
    position: fixed;
    font-family: Arial;
    color: white;
    height: 35%;
    width: 98%;
    margin: 10px;
    border: 1px solid white;
    background-color: black;
}
#head   {
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 1px solid white;
}

<body>
    <header>
        <h1 id="head">EMINƎM</h1>
            <div class="video">
                <video autoplay>
                    <source src="" type="video/mp4">
                </video>
            </div>
    </header>
</body>

*   {
    box-sizing: border-box;
}
body {
    background-color: black;
    margin: 5px;
}
header h1{

    position: absolute;
    border: 1px solid black;
    background-color: black;
    padding: 2px;
    left: 50%;
    transform: translate(-50%);
}
header {
    position: fixed;
    font-family: Arial;
    color: white;
    height: 35%;
    width: 98%;
    margin: 10px;
    border: 1px solid white;
    background-color: black;
}
#head   {
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 1px solid white;
}

<body>
    <header>
        <h1 id="head">EMINƎM</h1>
            <div class="video">
                <video autoplay>
                    <source src="https://www.youtube./watch?v=agUn18o-VRA" type="video/mp4">
                </video>
            </div>
    </header>
</body>

Thanks for any help!

Share edited Oct 17, 2024 at 5:43 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Jan 15, 2019 at 23:38 user10902208

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

This can be done, however there are a few things to consider:

Don't retrieve the video from YouTube. Instead, consider using a static video file (ie https://www.w3schools./html/mov_bbb.mp4 as shown below). This will give you greater control over the automatic playback of the video (which is important seeing that playback controls won't be available by default)
You'll need to make a few revisions to your CSS - the key changes to be aware of would be the following rules for your video element:

    z-index:-1; /* Causes the video to sit behind your heading */
    object-position:center; /* Causes video to be centred against the header */
    object-fit:cover; /* Causes video to cover/stretch to the header */

To ensure the video plays automatically, you'll want to add the muted attribute to the video element to ensure autoplay isn't blocked by browser

<video autoplay muted loop src="https://www.w3schools./html/mov_bbb.mp4" ></video>

Here's a working snippet to demonstrate these ideas in action:

* {
  box-sizing: border-box;
}

body {
  background-color: black;
  margin: 5px;
}

header {
  position: fixed;
  font-family: Arial;
  color: white;
  width: 98%;
  margin: 10px;
  border: 1px solid white;
  background-color: black;
  /* Add this */
  text-align: center;
  overflow: hidden;
}

header h1 {
  border: 1px solid black;
  background-color: black;
  padding: 2px;
  font-size: 5.5em;
  font-weight: bold;
  letter-spacing: 11px;
  text-align: center;
  /* Add this */
  display: inline-block;
}


/* Update this */

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-position: center;
  object-fit: cover;
}

<body>
  <header>
    <h1>EMINƎM</h1>
    <video autoplay muted loop src="https://www.w3schools./html/mov_bbb.mp4">
            </video>
  </header>
</body>

*   {
    box-sizing: border-box;
}
body {
    background-color: black;
    margin: 5px;
}
header h1{

    position: absolute;
    border: 1px solid black;
    background-color: black;
    padding: 2px;
    left: 50%;
    transform: translate(-50%);
}
header {
    position: fixed;
    font-family: Arial;
    color: white;
    height: 35%;
    width: 98%;
    margin: 10px;
    border: 1px solid white;
    background-color: black;
}
#head   {
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 1px solid white;
}

<body>
    <header>
        <h1 id="head">EMINƎM</h1>
            <div class="video">
                <video autoplay>
                    <source src="https://www.youtube./watch?v=agUn18o-VRA" type="video/mp4">
                </video>
            </div>
    </header>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to have video as background for the header - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)