kaoru-fukusato/動画背景　全画面表示　スマホ対応

## 動画背景　全画面表示　スマホ対応
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta charset="UTF-8">
	<title>あれこれ</title>
<meta name="keywords" content="あれこれ" />
<meta name="description" content="あれこれ" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <script src="main.js"></script>
	<style>
		*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.hero{
			margin-bottom: 100px;
			height: 100vh;
		}
		.main{
			margin: 0 auto 100px;
			width: 80%;
		}
		.post{
			display: flex;
			justify-content: space-between;
			margin-top: 40px;
		}
		.post__img{
			height: 300px;
			width: 30%;
		}
		.scrolldown{
			bottom: 20px;
			font-weight: bold;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
		}
		.scrolldown a{
			color: #fff;
		}
		.post__content{
			width: 65%;
		}
		.post__content__title{
			margin-bottom: 40px;
		}
		.footer{
			background: #222;
			color: #fff;
			padding: 40px 0;
			text-align: center;
		}
		.loading{
			align-items: center;
			background: #fff;
			display: flex;
			height: 100vh;
			left: 0;
			position: fixed;
			text-align: center;
			top: 0;
			width: 100%;
		}
		.loading p{
			width: 100%;
		}

		.cover a {
  display: block; }

.cover img {
  width: 100%; }

.video {
  display: none; }
	</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body>
	<div class="hero">
		<video class="js-fit-hero" src="video/20200418225236.mp4" autoplay loop>
		<source src="video/001.webm" type="video/webm">
		<source src="video/002.mp4" type="video/mp4"></video>
		<div class="scrolldown"><a href="#main">scrolldown↓</a></div>
	</div><!--hero-->
	<main id="main" class="main">
		<article class="post">
			<figure class="post__img">
				<video class="js-fit-post-img" src="video/01.mp4" autoplay loop></video>
			</figure>
			<div class="post__content">
				<h2 class="post__content__title">あれこれ</h2>
				<p>あれこれあれこれあれこれあれこれあれこれ</p>
			</div><!--post__content-->
		</article>
	</main>
	<footer class="footer">
		<p class="copyright">@2020 Dark world KaotanColonel</p>
	</footer>
	<div class="loading js-loading">
		<p>Now loading...</p>
	</div>
</body>
</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>あれこれ</title>
	<meta name="keywords" content="あれこれ" />
	<meta name="description" content="あれこれ" />
	<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	<script src="main.js"></script>
	<style>
	*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	.hero{
	margin-bottom: 100px;
	height: 100vh;
	}
	.main{
	margin: 0 auto 100px;
	width: 80%;
	}
	.post{
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	}
	.post__img{
	height: 300px;
	width: 30%;
	}
	.scrolldown{
	bottom: 20px;
	font-weight: bold;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	}
	.scrolldown a{
	color: #fff;
	}
	.post__content{
	width: 65%;
	}
	.post__content__title{
	margin-bottom: 40px;
	}
	.footer{
	background: #222;
	color: #fff;
	padding: 40px 0;
	text-align: center;
	}
	.loading{
	align-items: center;
	background: #fff;
	display: flex;
	height: 100vh;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	}
	.loading p{
	width: 100%;
	}

	.cover a {
	display: block; }

	.cover img {
	width: 100%; }

	.video {
	display: none; }
	</style>
	<script>
	window.console = window.console \|\| function(t) {};
	</script>
	<script>
	if (document.location.search.match(/type=embed/gi)) {
	window.parent.postMessage("resize", "*");
	}
	</script>
	</head>
	<body>
	<div class="hero">
	<video class="js-fit-hero" src="video/20200418225236.mp4" autoplay loop>
	<source src="video/001.webm" type="video/webm">
	<source src="video/002.mp4" type="video/mp4"></video>
	<div class="scrolldown"><a href="#main">scrolldown↓</a></div>
	</div><!--hero-->
	<main id="main" class="main">
	<article class="post">
	<figure class="post__img">
	<video class="js-fit-post-img" src="video/01.mp4" autoplay loop></video>
	</figure>
	<div class="post__content">
	<h2 class="post__content__title">あれこれ</h2>
	<p>あれこれあれこれあれこれあれこれあれこれ</p>
	</div><!--post__content-->
	</article>
	</main>
	<footer class="footer">
	<p class="copyright">@2020 Dark world KaotanColonel</p>
	</footer>
	<div class="loading js-loading">
	<p>Now loading...</p>
	</div>
	</body>
	</html>