Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kaoru-fukusato/bbc403229efb73a6e71f35771fbbae48 to your computer and use it in GitHub Desktop.
Save kaoru-fukusato/bbc403229efb73a6e71f35771fbbae48 to your computer and use it in GitHub Desktop.
動画背景 全画面表示 スマホ対応
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment