All geek questions in one place

Youtube Video Header Background

I am trying to create several website templates to help me improve my development skills at the front, as I am currently doing a lot better in the background.

I am trying to somewhat repeat the style of my own site ( https://thomas-smyth.co.uk/ ), which is a simple Bootstrap template. However, instead of using a static photo in the title, I want to replace her Youtube video. I started by shortening the template used on my website and divided it into everything, as I think I can get it without breaking the header.

I found a few code snippets around the place to show how to set a Youtube video as the background of a shared page, but not the background for certain sections of the page. How can i do this? Note. It must be transferred from YouTube, as my hosts do not allow me to post videos on my servers.

My current code is:

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

The best I have so far (doing the whole page 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%; } }
+3
source share
5 answers

I found a tutorial here that explains how to set a video as the background of your page. This tutorial shows how to make a video as a full-screen background and background only for a specific page as you want.

You need to install some HTML and CSS to achieve this background. The tutorial page provides sample code that you can copy.

Hope this helps you.

0
source

I created a simple example with a Youtube video background using direct links to the video stream (JS / CSS only). Feel free to check this out on JSfiddle . In addition, you can update the public Google Image proxy URL for any public or native CORS proxy.

 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>
+6
source

Regarding the answer @ 350D, the Yahoo API is deprecated ( https://twitter.com/ydn/status/1079785891558653952 ). But since it just uses it to read the file, here is my workaround:

replace:

 $.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(); }); } });

so that:

 var request = new XMLHttpRequest(); request.open('GET', "https://cors-anywhere.herokuapp.com/https://www.youtube.com/get_video_info?video_id=" + vid, true); request.send(null); request.onreadystatechange = function () { if (request.readyState === 4 && request.status === 200) { streams = parse_youtube_meta(request.responseText); video_tag.attr({ src: streams['2160p'] || streams['1440p'] || streams['1080p'] || streams['720p'] }); document.addEventListener("visibilitychange", function() { video_focused = !video_focused ? video_obj.play() : video_obj.pause(); }); } }

Hope this helps.

0
source

Thanks to the above, I really came up with a different method when the old died out. Maybe not as good as above, but it works for me. This is done in the WP plugin, and the user sets the height and several other parameters, such as video ID, mute, and volume. Also using the YouTube API.

You can see it here at the top of my site: 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(); } }

In style sheet

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

Below, the user's output to the height that he wants is generated. They set sizes for different devices, window sizes for better control.

 .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>
0
source

Just share the simple jQuery plugin I made to make your life easier.

You only need to select an element with the data-youtube attribute containing only a link to YouTube or ID. Everything else is done for you using the plugin, including the implementation of api and CSS scripts.

Here is an example of quick use. You can see it in action 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 code.

0
source

Source: https://habr.com/ru/post/891509/

More articles:


All Articles