Video na pozadí web stránky
O tomto zobrazení
Toto odpovedajúce usporiadanie je založené na vložení videa do pozadia web stránky. Neni to nič zložité, len treba dávať pozor aby sa video zobrazilo aj v mobilných zariadeniach. Dôležité je nastavenie v styl.css, podľa nastavenia sa potom zobrazí video na pozadí. Lebo mnohý prehľadávajú web hlavne na mobiloch, už nás je veľmi málo čo sedime pri PC a klikáme... Tu Vám dávam kód na vloženie videa.
Kód na vloženie videa
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>videopozadie</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="styl.css"> </head> <body> <div class="fullscreen-bg"> <video loop muted autoplay poster="https://www.mtsany.sk/filmy/relax.jpg" class="fullscreen-bg__video"> <source src="https://www.mtsany.sk/filmy/relax.mp4" type="video/mp4"> <source src="https://www.mtsany.sk/filmy/relax.webm" type="video/webm"> <source src="https://www.mtsany.sk/filmy/relax.ogv" type="video/ogg"> </video> </div> <!-- #wrapper --> <div id="wrapper" class="clearfix"> <div id="main"> <div class="black-50"> <h2>Popis niečoho</h2> <p>halo...halo...</p> <h3>Ďalší popis podľa uváženia</h3> <p>halo... halo...<p> </div> <!--pravá strana--> <div id="sidebar"> <div class="black-50"> <h2>Download</h2> <p> </div> <div class="black-50"> <h3>Popis niečoho</h3> <p>halo...halo...</p> </div> </div> </div> </div> <!-- /wrapper --> </body> </html>
styl.css
@charset "UTF-8"; @import "reset.css"; body,html{ font-size: 3vmin;} a:link {text-decoration: none;color:#fff;font-family: Verdana} a:visited {text-decoration: none;color:#fff;font-family: Verdana} a:active {text-decoration: none;color:#fff;font-family: Verdana} a:hover {text-decoration: none;color:#fff;font-family: Verdana} h1 {font-family: 'Times New Roman', Times, sans-serif; line-height: 1em; color: #f2e9f2; font-weight:bold; font-size: 3.5vw; text-shadow:0px 0px 0 rgb(185,176,185),1px 0px 0 rgb(127,118,127),2px 0px 0 rgb(70,61,70), 3px 0px 0 rgb(13,4,13),4px 0px 3px rgba(0,0,0,0.1),4px 0px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2); } h2 { font-size: 26px; line-height: 28px; font-weight: normal; letter-spacing: -1px; color: #fff; } h3 { font-size: 18px; font-weight: normal; margin: 8px 0; } h4 { font-size: 14px; font-weight: normal; margin: 0; } h5 { font-size: 12px; font-weight: normal; margin: 0; } ul { margin-left: 20px; } ol { margin-left: 36px; } #wrapper { width: 100%; margin: 0 auto; padding: 0px 0 72px;border-radius:10px;} #main {position:fixed; width: 60vw; height:100%; float: left; overflow-y:scroll;} #main > p, #main > div { margin-left: 2px; } #sidebar {position:fixed;top:10px; width: 30vw;height:100%; float: right; right:20px;overflow-y:scroll;} #sidebar ol { margin: 12px 0 5px 22px; }.black-15 { background: transparent; color: #fff; padding: 4px 12px; margin: 24px 0; }.black-35 { background: transparent; color: #fff; padding: 4px 12px; margin: 24px 0; }.black-50 { background: transparent; color: #fff; padding: 4px 12px; margin: 24px 0; }.black-65 { background: transparent; color: #fff; padding: 4px 12px; margin: 24px 0; }.black-85 { background: transparent; color: #fff; padding: 4px 12px; margin: 24px 0; }.clearfix:before,.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }.clearfix:after { clear: both; } .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; }.fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .fullscreen-bg__video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen-bg__video { width: 300%; left: -100%; } } @media (max-width: 167px) { .fullscreen-bg { background: url('../img/videoframe.jpg') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } }
script.js
Odstránenie scrollbaru document.write('<style type="text/css">'); /*---------------------------------------scrollbar----------------------*/ document.write('::-webkit-scrollbar {'); document.write('border-radius: 4px;'); document.write('width: 0px;'); document.write('height: 5px; '); document.write('cursor:pointer;} '); document.write('::-webkit-scrollbar-button { ' ); document.write(' border-radius: 4px; '); document.write('background:#fff ;'); document.write('height:10px; '); document.write('border:1px solid #ddd; '); document.write('cursor:pointer; }'); document.write('::-webkit-scrollbar-track-piece {'); document.write('border-radius: 2px; '); document.write('background:#c0c0c0;'); document.write('height:10px;'); document.write('cursor:pointer; }'); document.write('::-webkit-scrollbar-thumb {'); document.write('border-radius: 4px;'); document.write('background:#3A69E4;'); document.write('height:3px; }'); document.write("</style> ");
Videa použitelné na pozadie
Home
Relax
Spin
scifi
pozadie
skull
spirale
Tunnel
airplane
green-crystals
