Youtube 视频标题背景 [英] Youtube Video Header Background

查看：17
本文介绍了Youtube 视频标题背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一些网站模板来帮助我提高前端开发技能，因为我目前在后端工作方面做得更好.

我试图在某种程度上复制我自己网站的风格(https://thomas-smyth.co.uk/)，这是一个简单的 Bootstrap 模板.但是，我不想在标题中使用静态照片，而是想将其替换为 Youtube 视频.我首先减少了我网站中使用的模板，并将其精简到我认为在不破坏标题的情况下可以获得的尽可能少的模板.

我在这个地方找到了几段代码来展示如何将 Youtube 视频设置为整个页面的背景，而不是页面特定部分的背景.我怎样才能做到这一点?注意 - 它必须从 YouTube 流式传输，因为我的主机不允许我在他们的服务器上托管视频.

我当前的代码:

<头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 告诉浏览器响应屏幕宽度--><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><title>组名|主页<!-- Bootstrap 3.3.6 --><link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css"><!-- 字体真棒--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"><!-- 离子图标--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"><!-- 自定义--><link rel="stylesheet" href="dist/css/mainstyle.css"><身体><标题><div class="header-content"><div class="header-content-inner"><h1>一旦视频完成，这就会发生.</h1>

</标题><section class="bg-primary"><div class="容器"><div class="row"><div class="col-lg-8 col-lg-offset-2 text-center"><h2 class="section-heading">占位符！</h2><p>我应该找到一个机智的评论放在这里，但我只想把占位符"代替.</p>

</节><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>

CSS

html,身体 {高度:100%；宽度:100%；}身体 {font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;}h1,h2,h3，h4，h5，h6{font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;}p{字体大小:16px；行高:1.5；底边距:20px；}.bg-主要{背景色:#F05F40；}部分 {填充:100px 0;}.无填充{填充:0；}标题{位置:相对；宽度:100%；最小高度:自动；背景图片:url('../img/header.jpg');背景位置:0% 80%；-webkit-background-size: 封面；-moz-background-size: 封面；背景尺寸:封面；-o-背景尺寸:封面；文本对齐:居中；白颜色;}标头.标头内容{位置:相对；文本对齐:居中；填充:100px 15px 100px；宽度:100%；}标题 .header-content .header-content-inner h1 {字体粗细:700；文本转换:大写；边距顶部:0；底边距:0；字体大小:30px；}@media(最小宽度:768px){标题{最小高度:100%；}标头.标头内容{位置:绝对；顶部:50%；-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);变换:translateY(-50%);填充:0 50px；}标头 .header-content .header-content-inner {最大宽度:1000px；左边距:自动；右边距:自动；}标题 .header-content .header-content-inner h1 {字体大小:50px；}}.section-heading {边距顶部:0；}::-moz-选择{白颜色;文字阴影:无；背景:#222222；}::选择{白颜色;文字阴影:无；背景:#222222；}图像::选择{白颜色;背景:透明；}img::-moz-selection {白颜色;背景:透明；}身体 {webkit-tap-highlight-color: #222222;}

目前最好的(整个页面的背景)

<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>

CSS

* { box-sizing: border-box;}.video-background {背景:#000；位置:固定；顶部:0；右:0；底部:0；左:0；z-索引:-99；}.video-前景，.video-background iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；指针事件:无；}@media(最小纵横比:16/9){.video-foreground { 高度:300%；顶部:-100%；}}@media(最大纵横比:16/9){.video-foreground { 宽度:300%；左:-100%；}}

解决方案

我创建了一个简单的示例，其中包含 Youtube 视频背景，使用视频流的直接链接(仅限 JS/CSS 解决方案).请随时在 JSfiddle 上查看.此外，您可以将公开的 Google 图片代理网址更新为任何公开的或您自己的 CORS 代理.

var vid = "FUUw3zNTXH8",溪流，video_tag = document.getElementById("video");fetch("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURIComponent("https:///www.youtube.com/watch?hl=en&v=" + vid)).then(response => response.text()).then(function(data) {如果(数据){流 = parse_youtube_meta(data);video_tag.src =streams['hls'] ||流['720pna'] ||流['480pna'] ||流['720p'] ||流['480p'] ||流['360p'] ||流['240p'] ||流['144p'];} 别的 {alert('Youtube API 错误');}});函数 parse_youtube_meta(rawdata) {var regex =/(?:ytplayer.configs*=s*|ytInitialPlayerResponses?=s?)(.+?)(?:;var|;(function|)?;s*if|;s*if|;s*ytplayer.|;s* 0) console.log(stream);if (itag_map[itag]) 结果[itag_map[itag]] = stream.url;});如果(data.streamingData && data.streamingData.hlsManifestUrl){结果['hls'] = data.streamingData.hlsManifestUrl;}返回结果；};

html, body {高度:100%；最小高度:100%；背景:#444；溢出:隐藏；}视频 {宽度:100%；高度:100%；适合对象:覆盖；}

<视频循环静音自动播放playinline id="video"></video>

I'm trying to create a few website templates to help me improve my front end development skills, as I'm currently far better at rear end work.

I'm trying to somewhat replicate the style of my own website (https://thomas-smyth.co.uk/), which is a simple Bootstrap template. However, instead of using a static photo in the header, I want to replace it with a Youtube video. I began by cutting down the template used in my website and have stripped it down to as little as I think I can get it without breaking the header.

I have found a few pieces of code around the place to show how to set a Youtube video as background of the overall page, but not the background for specific sections of the page. How can I do this? Note - It has to be streamed from YouTube as my hosts don't allow me to host video's on their servers.

My current code:

<!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;
}

Best I have so far (does whole page's background)

<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%; }
}

解决方案

I've created a simple example with Youtube video background using direct links to video stream (JS/CSS only solution). Feel free to check it on JSfiddle. Also, you can update public Google Image proxy URL to any public or your own CORS proxy.

var vid = "FUUw3zNTXH8",
    streams,
    video_tag = document.getElementById("video");

fetch("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURIComponent("https://www.youtube.com/watch?hl=en&v=" + vid)).then(response => response.text()).then(function(data) {
    if (data) {
        streams = parse_youtube_meta(data);
        video_tag.src = streams['hls'] || streams['720pna'] || streams['480pna'] || streams['720p'] || streams['480p'] || streams['360p'] || streams['240p'] || streams['144p'];
    } else {
        alert('Youtube API Error');
    }
});

function parse_youtube_meta(rawdata) {


    var regex = /(?:ytplayer.configs*=s*|ytInitialPlayerResponses?=s?)(.+?)(?:;var|;(function|)?;s*if|;s*if|;s*ytplayer.|;s*</script)/gmsu;


    rawdata = rawdata.split('window.getPageData')[0];
    rawdata = rawdata.replace('ytInitialPlayerResponse = null', '');
    rawdata = rawdata.replace('ytInitialPlayerResponse=window.ytInitialPlayerResponse', '');
    rawdata = rawdata.replace('ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};', '');


    var matches = regex.exec(rawdata);
    var data = matches && matches.length > 1 ? JSON.parse(matches[1]) : false;

    console.log(data);

    var streams = [],
        result = {};

    if (data.streamingData && data.streamingData.adaptiveFormats) {
        streams = streams.concat(data.streamingData.adaptiveFormats);
    }

    if (data.streamingData && data.streamingData.formats) {
        streams = streams.concat(data.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;
    });

    if (data.streamingData && data.streamingData.hlsManifestUrl) {
        result['hls'] = data.streamingData.hlsManifestUrl;
    }

    return result;
};

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>

这篇关于Youtube 视频标题背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆