我正在尝试创建一些网站模板来帮助我提高我的前端开发技能,因为我目前在后端工作方面要好得多.
我试图在某种程度上复制我自己网站的风格(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> …