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