Youtube视频标题背景

时间：2017-01-12 14:54:22

标签： html css youtube youtube-api

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

我试图在某种程度上复制我自己网站的风格（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%; }
}

4 个答案:

答案 0 :(得分：6)

我使用直接链接到视频流（仅限JS / CSS解决方案）创建了一个简单的Youtube视频背景示例。请随意在JSfiddle上查看。此外，您还可以将公共Google Image代理网址更新为任何公共或您自己的CORS代理。

var vid = "R3AKlscrjmQ",
    streams,
    video_focused = true,
    video_tag = $("#video"),
    video_obj = video_tag.get(0);
$.get("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, function(data) {
    if (data) {
        streams = parse_youtube_meta(data);
        video_tag.attr({
            src: streams['1080p'] || streams['720p'] || streams['360p']
        });

        document.addEventListener("visibilitychange", function() {
            video_focused = !video_focused ? video_obj.play() : video_obj.pause();
        });
    } else {
    		$('pre').text('Youtube API Error');
    }
});

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',
                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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video loop muted autoplay playsinline id="video"></video>

答案 1 :(得分：0)

我在这里找到tutorial，其中介绍了如何将视频设置为您网页的背景。本教程将介绍如何将视频作为全屏背景和背景，仅用于您想要的特定页面。

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

希望它对你有所帮助。

答案 2 :(得分：0)

由于上述原因，当旧的方法消失时，我实际上想出了另一种方法。也许不如上述，但它对我有用。这被制成WP插件，用户可以设置高度和其他一些选项，例如视频ID，静音和音量。也使用YouTube API。

可以在我的网站顶部https://neotropicworks.com/

处看到它。 
// Output from plugin onto page using 'wp_add_inline_script' to JS file below
var video_id = "qnTsIVYxYkc",video_mute = true,video_volume = 50;

// JS file
var player;
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-header-player', {
        videoId: video_id,
        playerVars: {
            playlist: video_id,
            loop: 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
    if(video_mute){
        player.mute();
    } else {
        player.setVolume(video_volume);
    }
}
function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
        player.playVideo(); 
    }
}

在样式表中

.video-wrapper{width: 100%;overflow: hidden;position: relative;}
.video-container {position: absolute;width: auto;top: -50%;left: 0;right: 0;bottom: -50%;}
.video-bg {background: none;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;}
.video-bg .video-fg,.video-bg iframe,.video-bg video {position: absolute;top: 0;left: 0 !important;width: 100% !important;height: 100%;}

以下是用户根据他们想要的高度生成的输出。他们为不同的设备设置大小，为更好的控制设置窗口大小。

.video-wrapper{height: 400px;}
.video-container {height: 800px;}
@media (min-width: 768px) and (max-width: 991px) {
    .video-wrapper{height: 300px;}
    .video-container {height: 600px;}
}
@media (max-width:767px) {
    .video-wrapper{height: 200px;}
    .video-container {height: 400px;}
}

HTML 

<div class="video-wrapper">
    <div class="video-container">
        <div class="video-bg">
            <div class="video-fg" id="youtube-header-player"></div>
        </div>
    </div>
</div>

答案 3 :(得分：0)

只需共享我制作的一个简单jQuery插件，即可使您的生活更轻松。

您只需要选择一个具有data-youtube属性的元素，该元素仅包含youtube链接或ID。插件为您完成了所有其他工作，包括嵌入api脚本注入和CSS。

这里是一个快速用法示例。您可以在操作here中看到它。

<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('[data-youtube]').youtube_background();
    });
</script>

GitHub上的代码。

相关问题
最新问题