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

问题描述

我试图创建一些网站模板来帮助我提高前端开发技能，因为我目前在后端工作方面的表现要好得多。我试图在某种程度上复制我自己网站的风格（ https://thomas-smyth.co.uk / ），这是一个简单的Bootstrap模板。但是，我不想在标题中使用静态照片，而是使用Youtube视频替换它。我开始削减在我的网站中使用的模板，并将其精简到尽可能小，我认为我可以在不破坏标题的情况下得到它。

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

我目前的代码：

 <！DOCTYPE html> 
< html> 
 
< head> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
 <！ - 告诉浏览器响应屏幕宽度 - > 
  
< title>组名称|家庭及LT; /标题> 
 
 <！ -  Bootstrap 3.3.6  - > 
< link rel =stylesheethref =dist / bootstrap / css / bootstrap.min.css> 
 <！ -  Font Awesome  - > 
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css> 
 <！ -  Ionicons  - > 
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css> 
 
 <！ -  Custom  - > 
< link rel =stylesheethref =dist / css / mainstyle.css> 
 
< / head> 
 
< body> 
 
< header> 
< div class =header-content> 
< div class =header-content-inner> 
< h1>一旦vid完成，就会执行此操作。< / 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>占位符！< / h2> 
< p>我应该在这里找到一个诙谐的评论，但我只是想放置占位符。< / p> 
< / div> 
< / div> 
< / div> 
< / section> 
 
 
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js> < /脚本> 
< script src =dist / bootstrap / js / bootstrap.min.js>< / script> 
< script src =dist / js / mainscript.js>< / script> 
 
< / body> 
 
< / html> 
  

CSS

  html，
 body {
 height：100％; 
宽度：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; 
} 
部分{
 padding：100px 0; 
} 
 .no-padding {
 padding：0; 
} 
 
标题{
 position：relative; 
宽度：100％; 
 min-height：auto; 
 background-image：url（'../ img / header.jpg'）; 
背景位置：0％80％; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 background-size：cover; 
 -o-background-size：cover; 
 text-align：center; 
颜色：白色; 
} 
 header .header-content {
 position：relative; 
 text-align：center; 
 padding：100px 15px 100px; 
宽度：100％; 
} 
 header .header-content .header-content-inner h1 {
 font-weight：700; 
 text-transform：大写; 
 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 {
颜色：白色; 
 text-shadow：none; 
背景：＃222222; 
} 
 :: selection {
颜色：白色; 
 text-shadow：none; 
背景：＃222222; 
} 
 img :: selection {
 color：white; 
背景：透明; 
} 
 img ::  -  moz-selection {
 color：white; 
背景：透明; 
} 
 body {
 webkit-tap-highlight-color：＃222222; 
} 
  

目前为止， strong>

 < 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- UmQframeborder =0allowfullscreen>< / iframe> 
< / div> 
< / div> 
  

CSS

  * {box-sizing：border-box; } 
 .video-background {
 background：＃000; 
位置：固定; 
 top：0;正确：0;底部：0;左：0; 
 z-index：-99; 
} 
 .video-foreground，
 .video-background iframe {
 position：absolute; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 pointer-events：none; 
} 
 @media（min-aspect-ratio：16/9）{
 .video-foreground {height：300％;顶部：-100％; } {
} 
 @media（max-aspect-ratio：16/9）{
 .video-foreground {width：300％;剩下：-100％; } 
} 
  

解决方案

a href =http://www.developphp.com/video/CSS/Video-Background-Tutorial-Plus-Youtube-Embed =nofollow noreferrer>教程，它解释了如何将视频设置为您的网页的背景。本教程演示如何将视频作为全屏背景以及仅用于特定页面的背景，如您所愿。

您需要设置Html和CSS部分以实现这种背景。教程页面包含一些您可以复制的示例代码。

希望它对您有所帮助。

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 found here a tutorial that explains how to set a video as a background of your page. This tutorial shows how to make the video as a fullscreen background and a background for only a specific page like you want.

You need to set your Html and CSS part to achieve this kind of background. The tutorial page includes some sample code that you can copy.

Hope it helps you.

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