Skip to content

Instantly share code, notes, and snippets.

  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
動画背景 全画面表示 スマホ対応
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="ja" lang="ja">
<meta charset="UTF-8">
<meta name="keywords" content="あれこれ" />
<meta name="description" content="あれこれ" />
<script src=""></script>
<script src="main.js"></script>
box-sizing: border-box;
margin: 0;
padding: 0;
margin-bottom: 100px;
height: 100vh;
margin: 0 auto 100px;
width: 80%;
display: flex;
justify-content: space-between;
margin-top: 40px;
height: 300px;
width: 30%;
bottom: 20px;
font-weight: bold;
left: 50%;
position: absolute;
transform: translateX(-50%);
.scrolldown a{
color: #fff;
width: 65%;
margin-bottom: 40px;
background: #222;
color: #fff;
padding: 40px 0;
text-align: center;
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; }
window.console = window.console || function(t) {};
if ( {
window.parent.postMessage("resize", "*");
<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>
<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>
<div class="post__content">
<h2 class="post__content__title">あれこれ</h2>
<footer class="footer">
<p class="copyright">@2020 Dark world KaotanColonel</p>
<div class="loading js-loading">
<p>Now loading...</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment