Advertisement
1xptolevitico69

Website setup video on demand

Aug 19th, 2022 (edited)
830
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <!-- Global site tag (gtag.js) - Google Analytics -->
  6.   <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-420XFJRS1M"></script>
  7.   <script>
  8.     window.dataLayer = window.dataLayer || [];
  9.  
  10.     function gtag() {
  11.       dataLayer.push(arguments);
  12.     }
  13.     gtag('js', new Date());
  14.     gtag('config', 'G-420XFJRS1M');
  15.   </script>
  16.   <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  17.   <meta charset="UTF-8">
  18.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  19.   <meta name="keywords" content="website setup video on demand,1xpto,how to,site,media,favorites,html,javascript,video,scroll,preview">
  20.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.   <title>Website setup video on demand</title>
  22.   <style>
  23.     body {
  24.       margin: 0;
  25.     }
  26.  
  27.     #box {
  28.       width: 90%;
  29.       margin: 1vw auto;
  30.       box-sizing: border-box;
  31.     }
  32.  
  33.     #sec {
  34.       display: none;
  35.       width: 70%;
  36.       height: calc(70vw / 1.777);
  37.       margin: 1vw auto;
  38.       border: 5px solid red;
  39.       box-sizing: border-box;
  40.     }
  41.  
  42.     .vid {
  43.       width: 100%;
  44.       border: 0;
  45.       padding: 5px;
  46.       box-sizing: border-box;
  47.     }
  48.  
  49.     video {
  50.       padding: 5px;
  51.       width: 49%;
  52.       border: 1px solid red;
  53.       box-sizing: border-box;
  54.     }
  55.  
  56.     @media all and (orientation:portrait) {
  57.       #sec {
  58.         width: 100%;
  59.         height: calc(100vw / 1.777);
  60.         margin: auto;
  61.         border: 0;
  62.       }
  63.  
  64.       .vid {
  65.         padding: 0;
  66.       }
  67.     }
  68.  
  69.     @media all and (orientation:landscape) and (max-width:768px) {
  70.       #sec {
  71.         width: 100%;
  72.         height: calc(100vw / 1.777);
  73.         margin: auto;
  74.         border: 0;
  75.       }
  76.  
  77.       .vid {
  78.         padding: 0;
  79.       }
  80.     }
  81.   </style>
  82. </head>
  83.  
  84. <body>
  85.  
  86.   <section id='sec'></section>
  87.  
  88.   <div id='box'>
  89.     <center>
  90.  
  91.       <video class='video' src='https://1xpto.netlify.app/video/1.mp4'></video>
  92.       <video class='video' src='https://1xpto.netlify.app/video/2.mp4'></video>
  93.       <video class='video' src='https://1xpto.netlify.app/video/3.mp4'></video>
  94.       <video class='video' src='https://1xpto.netlify.app/video/4.mp4'></video>
  95.       <video class='video' src='https://1xpto.netlify.app/video/5.mp4'></video>
  96.       <video class='video' src='https://1xpto.netlify.app/video/6.mp4'></video>
  97.       <video class='video' src='https://1xpto.netlify.app/video/7.mp4'></video>
  98.       <video class='video' src='https://1xpto.netlify.app/video/8.mp4'></video>
  99.       <video class='video' src='https://1xpto.netlify.app/video/9.mp4'></video>
  100.       <video class='video' src='https://1xpto.netlify.app/video/10.mp4'></video>
  101.       <video class='video' src='https://1xpto.netlify.app/video/11.mp4'></video>
  102.       <video class='video' src='https://1xpto.netlify.app/video/12.mp4'></video>
  103.       <video class='video' src='https://1xpto.netlify.app/video/13.mp4'></video>
  104.       <video class='video' src='https://1xpto.netlify.app/video/14.mp4'></video>
  105.       <video class='video' src='https://1xpto.netlify.app/video/15.mp4'></video>
  106.       <video class='video' src='https://1xpto.netlify.app/video/16.mp4'></video>
  107.       <video class='video' src='https://1xpto.netlify.app/video/17.mp4'></video>
  108.       <video class='video' src='https://1xpto.netlify.app/video/18.mp4'></video>
  109.     </center>
  110.   </div>
  111.  
  112.   <script>
  113.     vid = document.createElement('video');
  114.     sec.appendChild(vid);
  115.     vid.controls = true;
  116.     vid.className = 'vid';
  117.     video = document.getElementsByClassName('video');
  118.     for (i = 0; i < video.length; i++) {
  119.      ct = video[i].currentTime = 2;
  120.    }
  121.    document.onmouseover = function(e) {
  122.      video = document.getElementsByClassName('video');
  123.      for (i = 0; i < video.length; i++) {
  124.        if (video[i] == e.target) {
  125.          video[i].muted = true;
  126.          video[i].play();
  127.          video[i].ontimeupdate = function(e) {
  128.            if (e.target.currentTime > 10) {
  129.               e.target.currentTime = ct;
  130.             }
  131.           }
  132.         } else if (video[i] != e.target) {
  133.           video[i].pause();
  134.           video[i].currentTime = ct;
  135.         }
  136.       }
  137.     }
  138.     document.onclick = function(e) {
  139.       video = document.getElementsByClassName('video');
  140.       for (i = 0; i < video.length; i++) {
  141.        if (video[i] == e.target) {
  142.          vid.src = video[i].src;
  143.          sec.style.display = 'block';
  144.          vid.play();
  145.          vid.loop = true;
  146.          window.scrollTo(0, 0);
  147.        }
  148.      }
  149.    }
  150.    window.onscroll = () => {
  151.       vid.ontimeupdate = () => {
  152.         if (vid.muted == false && window.pageYOffset >= 200) {
  153.          vid.muted = false;
  154.           vid.pause();
  155.         }
  156.       }
  157.     }
  158.     history.scrollRestoration = "manual";
  159.     $(window).on('beforeunload', function() {
  160.       $(window).scrollTop(0);
  161.     });
  162.   </script>
  163. </body>
  164.  
  165. </html>
  166.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement