HTML/CSS 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="https://www.youtube.com/watch?v=agUn18o-VRA" type="video/mp4">
                </video>
            </div>
    </header>
</body>

Thanks for any help!

回答1:

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.com/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.com/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.com/html/mov_bbb.mp4">
            </video>
  </header>
</body>

回答2:

Use an iframe for YouTube embeds. Also, you would need to add transparency to the back of your text div, otherwise it will inherit the black background.

*   {
    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   {
    position: absolute;
    width: 100%;
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
    background: transparent;
}
.video {
    min-width: 100%;
    min-height: 100%;
    border: 1px solid white;
}

<body>
    <header>
        <h1 id="head">EMINƎM</h1>
        <div class="video">
            <iframe width="840" height="200"
            src="https://www.youtube.com/watch?v=agUn18o-VRA">
            </iframe>
        </div>
    </header>
</body>

来源：https://stackoverflow.com/questions/54208390/html-css-video-as-background-for-the-header

标签

javascript

html

css