Youtube视频标题背景

我正在尝试创建一些网站模板来帮助我提高前端开发技能，因为我目前在后端工作方面的表现要好得多。Youtube视频标题背景

我试图有点复制我自己的网站（https://thomas-smyth.co.uk/），这是一个简单的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%; } 
}

来源

2017-01-12 Thomas Smyth

我发现这里tutorial，介绍如何设置视频为您的页面的背景。本教程演示如何将视频制作为全屏幕背景以及仅用于特定页面的背景，就像您想要的那样。

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

希望它可以帮助你。

来源

2017-01-13 13:28:42 KENdi

当前的代码正是这么做的，或者至少我调整稍微做。我不认为它实际上可能是将视频作为页面的div /部分的背景进行流式传输，除非您使用HTML视频播放器，而Youtube视频无法做到这一点，所以我通过页面在背景上放置了空白框在同一页面的其他地方有不同的背景。 –

你已经解决了这个问题吗？ – KENdi

我还没有解决它，但找到了一个暂时的方法，这有点粗糙。如果没有人能够很快回答我的问题，我认为这是不可能的，因为这是我读过的各种文章和问题的印象。 –

我创建了一个简单的Youtube视频背景示例，使用直接链接到视频流（YQL/JS/CSS唯一解决方案）。有时，YQL请求在SO上不起作用，因此，请随时在YQL console和JSfiddle中检查它。

var vid = "9PDcJeymhWM", 
 
    streams, 
 
    video_focused = true, 
 
    video_tag = $("#video"), 
 
    video_obj = video_tag.get(0); 
 
$.getJSON("https://query.yahooapis.com/v1/public/yql", { 
 
    q: "select * from csv where url='https://www.youtube.com/get_video_info?video_id=" + vid + "'", 
 
    format: "json" 
 
}, function(data) { 
 
    if (data.query.results) { 
 
     streams = parse_youtube_meta(data.query.results.row.col0); 
 
     video_tag.attr({ 
 
      src: streams['1440p'] || streams['1080p'] || streams['720p'] 
 
     }); 
 

 
     document.addEventListener("visibilitychange", function() { 
 
      video_focused = !video_focused ? video_obj.play() : video_obj.pause(); 
 
     }); 
 
    } 
 
}); 
 

 
function parse_youtube_meta(rawdata) { 
 
    var data = parse_str(rawdata), 
 
     streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','), 
 
     result = {}; 
 
$.each(streams, function(n, s) { 
 
    var stream = parse_str(s), 
 
     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', 160: '144pna', 264: '1440pna', 139: "48kbps", 140: "128kbps", 141: "256kbps"}; 
 
    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 { 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
\t background: #444; 
 
\t overflow: hidden; 
 
} 
 
video { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video loop muted autoplay playsinline id="video"></video>

来源

2017-07-28 16:07:55 350D

我现在很害怕你。花费DAYS试图解决这个问题。所有的例子都是整页！只需包装div元素和所有设置。 –

和@ShawnRebelo一样的故事，你真棒！我唯一注意到的是，看起来视频质量不如在Youtube上直接观看视频质量那么好（不那么流畅/清晰）。有什么可以提高质量吗？我的youtube vid有1080p50。也许对于50 fps不同的标签是必需的？ – Nicholas

@尼古拉斯嗨。您可以扩展流格式并添加更多： '... 298：'720p60na'，299：'1080p60na'，264：'1440pna'...'但所有这些额外的流都没有声音，需要更长的时间才能启动播放。 – 350D

Youtube视频标题背景

回答

相关问题