1. 首页
  2. 问题
  3. Youtube视频标题背景
一尘不染

Youtube视频标题背景

css

我正在尝试创建一些网站模板来帮助我提高前端开发技能，因为我目前在后端工作上要好得多。

我试图在某种程度上复制我自己的网站的样式，这是一个简单的Bootstrap模板。但是，我不想在标题中使用静态照片，而是将其替换为Youtube视频。我首先减少了网站中使用的模板，然后将其减少到我认为不破坏标题的程度。

我在附近找到了一些代码，以显示如何将Youtube视频设置为整个页面的背景，而不是页面特定部分的背景。我怎样才能做到这一点？注意-
由于我的主持人不允许我在他们的服务器上托管视频，因此必须从YouTube流式传输。

我当前的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <title>Group Name | Home</title>

    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

    <!-- Custom -->
    <link rel="stylesheet" href="dist/css/mainstyle.css">

</head>

<body>

    <header>
        <div class="header-content">
            <div class="header-content-inner">
                <h1>This is going once vid is done.</h1>
            </div>
        </div>
    </header>

    <section class="bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Placeholder!</h2>
                    <p>I should have found a witty comment to put here, but I'm just gonna put "Placeholder" instead.</p>
                </div>
            </div>
        </div>
    </section>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
    <script src="dist/js/mainscript.js"></script>

</body>

</html>

CSS

html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.bg-primary {
  background-color: #F05F40;
}
section {
  padding: 100px 0;
}
.no-padding {
  padding: 0;
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    background-image: url('../img/header.jpg');
    background-position: 0% 80%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
    color: white;
}
header .header-content {
  position: relative;
  text-align: center;
  padding: 100px 15px 100px;
  width: 100%;
}
header .header-content .header-content-inner h1 {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
}
@media (min-width: 768px) {
  header {
    min-height: 100%;
  }
  header .header-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
  }
  header .header-content .header-content-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  header .header-content .header-content-inner h1 {
    font-size: 50px;
  }
}
.section-heading {
  margin-top: 0;
}

::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}

到目前为止，我最好的（整个页面的背景都在做）

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

CSS

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

阅读 318

收藏
2020-05-16

共1个答案

一尘不染

我使用直接链接到视频流的YouTube视频背景创建了一个简单示例（仅JS /
CSS解决方案）。随时在JSfiddle上检查它。另外，您可以将公共Google
Image代理URL更新为任何公共或您自己的CORS代理。

var vid = "FUUw3zNTXH8",

    streams,

    video_tag = document.getElementById("video");



fetch("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid).then(response => response.text()).then(function(data) {

    if (data) {

        streams = parse_youtube_meta(data);

        video_tag.src = streams['1080p'] || streams['720p'] || streams['360p'];

    } else {

        alert('Youtube API Error');

    }

});



function parse_youtube_meta(rawdata) {

    var data = parse_str(rawdata),

            player_response = JSON.parse(data.player_response),

        streams = [],

            result = {};



    data.player_response = player_response;



    if (data.hasOwnProperty('adaptive_fmts')) {

            streams = streams.concat(data.adaptive_fmts.split(',').map(function(s) {

                return parse_str(s)

            }));

        } else {

            if (player_response.streamingData && player_response.streamingData.adaptiveFormats) {

                streams = streams.concat(player_response.streamingData.adaptiveFormats);

            }

        }

        if (data.hasOwnProperty('url_encoded_fmt_stream_map')) {

            streams = streams.concat(data.url_encoded_fmt_stream_map.split(',').map(function(s) {

                return parse_str(s)

            }));

        } else {

            if (player_response.streamingData && player_response.streamingData.formats) {

                streams = streams.concat(player_response.streamingData.formats);

            }

        }



    streams.forEach(function(stream, n) {

        var itag = stream.itag * 1,

            quality = false,

            itag_map = {

                18: '360p',

                22: '720p',

                37: '1080p',

                38: '3072p',

                82: '360p3d',

                83: '480p3d',

                84: '720p3d',

                85: '1080p3d',

                133: '240pna',

                134: '360pna',

                135: '480pna',

                136: '720pna',

                137: '1080pna',

                264: '1440pna',

                298: '720p60',

                299: '1080p60na',

                160: '144pna',

                139: "48kbps",

                140: "128kbps",

                141: "256kbps"

            };

        //if (stream.type.indexOf('o/mp4') > 0) console.log(stream);

        if (itag_map[itag]) result[itag_map[itag]] = stream.url;

    });

    return result;

};



function parse_str(str) {

    return str.split('&').reduce(function(params, param) {

        var paramSplit = param.split('=').map(function(value) {

            return decodeURIComponent(value.replace('+', ' '));

        });

        params[paramSplit[0]] = paramSplit[1];

        return params;

    }, {});

}


html, body {

    height: 100%;

    min-height: 100%;

    background: #444;

    overflow: hidden;

}

video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


<video loop muted autoplay playsinline id="video"></video>
2020-05-16