CODEWITHSUNDEEP
htmlcssyoutubeyoutube-api
Thomas Smyth
Thomas Smyth

Reputation: 522

Youtube Video Header Background

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

Upvotes: 5

Views: 18449

Answers (4)

350D
350D

Reputation: 11440

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\.config\s*=\s*|ytInitialPlayerResponse\s?=\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>

Upvotes: 16

stamat
stamat

Reputation: 1979

Just sharing a simple jQuery plugin I've made, to make your lives easier.

You only need to select an element with a data-youtube attribute containing a youtube link or ID only. Everything else is done for you by the plugin, including embed api script injection and CSS.

Here is a quick usage sample. 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>

Code on GitHub.

Upvotes: 0

Shawn Rebelo
Shawn Rebelo

Reputation: 1077

Thanks to the above, I actually came up with a different method when the old one died out. Maybe not as good as the above, but it works for me. This is made into a WP Plugin and the user sets the height and a few other options like Video ID, mute and volume. Also using YouTube API.

Can see it here at the top of my website: 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 a stylesheet

.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 is generated output from user on the height they want. They set sizes for the 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;}
}

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

Upvotes: 0

KENdi
KENdi

Reputation: 7741

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.

Upvotes: 0

Related Questions