動画を色々なパターンで使用する例です。
ただ無料レンタルサーバーではファイルの上限が厳しいので動画は注意が必要です。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動画を沢山載せる</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>FELICA</h1> </header> <main> <div class="content-wrapper"> <div class="video-box"> <video src="img/01.mp4" autoplay muted loop></video> </div> <div class="txt-box"> <h2>Lorem, ipsum dolor.</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quidem impedit ducimus aliquid sit architecto nostrum officia doloremque vitae laudantium. Itaque illo rerum, cumque repellat a impedit omnis exercitationem laudantium inventore doloremque facilis autem? Quis doloremque ratione beatae modi aperiam sapiente quae cum autem officiis, odit vitae sequi ex facilis libero, soluta sint? Deserunt laudantium beatae non ipsam explicabo ab.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quidem impedit ducimus aliquid sit architecto nostrum officia doloremque vitae laudantium. Itaque illo rerum, cumque repellat a impedit omnis exercitationem laudantium inventore doloremque facilis autem? Quis doloremque ratione beatae modi aperiam sapiente quae cum autem officiis, odit vitae sequi ex facilis libero, soluta sint? Deserunt laudantium beatae non ipsam explicabo ab.</p> </div> </div><!-- /.content-wrapper --> <div class="content-wrapper"> <div class="video-box"> <video src="img/02.mp4" autoplay muted loop></video> </div> <div class="txt-box"> <h2>Lorem, ipsum dolor.</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quidem impedit ducimus aliquid sit architecto nostrum officia doloremque vitae laudantium. Itaque illo rerum, cumque repellat a impedit omnis exercitationem laudantium inventore doloremque facilis autem? Quis doloremque ratione beatae modi aperiam sapiente quae cum autem officiis, odit vitae sequi ex facilis libero, soluta sint? Deserunt laudantium beatae non ipsam explicabo ab.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quidem impedit ducimus aliquid sit architecto nostrum officia doloremque vitae laudantium. Itaque illo rerum, cumque repellat a impedit omnis exercitationem laudantium inventore doloremque facilis autem? Quis doloremque ratione beatae modi aperiam sapiente quae cum autem officiis, odit vitae sequi ex facilis libero, soluta sint? Deserunt laudantium beatae non ipsam explicabo ab.</p> </div> </div><!-- /.content-wrapper --> </main> <footer> <p><small>© 2023 felica</small></p> </footer> </body> </html>
style.css
@charset "utf-8"; html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;vertical-align: bottom;} header{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #c7cfa3; >h1{ font-family: 'Russo One', sans-serif; font-size: 14vw; letter-spacing: 0.1em; background: url(../img/header.gif) no-repeat center center/cover; -webkit-background-clip: text; color: transparent; } } footer{ width: 100%; background-color: #bababa; >p{ text-align: center; padding: 100px 0; } } .content-wrapper{ display: flex; margin-bottom: 40vh; &:nth-of-type(even){ flex-direction: row-reverse; } } .video-box{ width: 60%; height: 100vh; position: sticky; top: 0; >video{ object-fit: cover; width: 100%; height: 100%; } } .txt-box{ width: 40%; padding: 10% 5%; >h2{ text-align: center; margin-bottom: 60px; font-size: 30px; } >p{ font-size: 18px; line-height: 2.4; margin-bottom: 100px; } }
