Banner double image slider

Made small videos, stop motions, freelance, or trying to promote myself.

THIS PAGE IS FOR THE RANDOM ARTS

Image carousel

Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Video Gallery</title>
<style>
  body {
    margin: 0;
    padding: 1rem;
    font-family: sans-serif;
  }

  .vg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }

  .vg-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16/9;
    cursor: pointer;
  }

  .vg-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .vg-tile:hover video {
    transform: scale(1.04);
  }

  .vg-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 10px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    pointer-events: none;
  }

  .vg-accent {
    position: absolute;
    top: 8px; left: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff4d6d;
    transition: background 0.3s;
  }

  .vg-tile:hover .vg-accent {
    background: #a8ff3e;
  }

  .vg-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s;
  }

  .vg-tile:hover .vg-play-icon {
    background: rgba(255,255,255,0.35);
  }

  .vg-play-icon::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    margin-left: 4px;
  }

  /* Lightbox */
  .vg-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .vg-lightbox.open {
    display: flex;
  }

  .vg-lightbox video {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
    outline: none;
  }

  .vg-close {
    position: fixed;
    top: 18px; right: 24px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    z-index: 10000;
    opacity: 0.8;
  }

  .vg-close:hover { opacity: 1; }
</style>
</head>
<body>

<div class="vg-grid" id="gallery"></div>


<div class="vg-lightbox" id="lightbox">
  <button class="vg-close" id="closeBtn">&times;</button>
  <video id="lbVideo" controls playsinline></video>
</div>

<script>
  /*
    INSTRUCTIONS:
    - Each src must be a Dropbox link ending in ?raw=1
    - Change dl=0 to raw=1 on every Dropbox link
    - Change the label to whatever you want displayed
    - Add or remove lines to match your clip count
  */

  const videos = [
    { src: "https://www.dropbox.com/scl/fi/9o0cbfz8mfqjodbc60hj9/Brazil_flyover.MOV?rlkey=m6n69pgiwta7qqnfbmbd38krg&st=8pn6xbbs&raw=1", label: "Clip 01" },
    { src: "https://www.dropbox.com/scl/fi/orxtis4i86yiyr6sx2oot/IMG_0770.mov?rlkey=d43krmrlvwzt4vvdejp35g7iu&st=br8p0duf&raw=1", label: "Clip 02" },
    { src: "https://www.dropbox.com/scl/fi/xs3rw0wke227qpgtxos1s/MetalCar_model.mov?rlkey=1gezc0y710rxqnmnvhr187z97&st=ij7mdlzs&raw=1", label: "Clip 03" },
    { src: "https://www.dropbox.com/scl/fi/uy3znjksuqivyio46k2te/ferriswheel.mov?rlkey=3abq4zvze2vhum6x75e6lpxa6&st=etg713u3&raw=1", label: "Clip 04" },
    { src: "https://www.dropbox.com/scl/fi/na0juhyvecr2nveh9f0zf/StarWars_metal.mp4?rlkey=37mjd2g7j4ex3gt39trpx6bt7&st=uu8rb2e4&raw=1", label: "Clip 05" },
    { src: "https://www.dropbox.com/scl/fi/wc0c4vypbhavxfbtqrsa2/SW_foot3.mp4?rlkey=4d4432gv7dwwl3of17ztydp3w&st=hl78djrz&raw=1", label: "Clip 06" },
  ];

  const gallery = document.getElementById("gallery");
  const lightbox = document.getElementById("lightbox");
  const lbVideo = document.getElementById("lbVideo");
  const closeBtn = document.getElementById("closeBtn");

  videos.forEach(({ src, label }) => {
    const tile = document.createElement("div");
    tile.className = "vg-tile";

    const vid = document.createElement("video");
    vid.src = src;
    vid.muted = true;
    vid.loop = true;
    vid.playsInline = true;
    vid.preload = "metadata";

    const lbl = document.createElement("div");
    lbl.className = "vg-label";
    lbl.textContent = label;

    const dot = document.createElement("div");
    dot.className = "vg-accent";

    const playIcon = document.createElement("div");
    playIcon.className = "vg-play-icon";

    tile.appendChild(vid);
    tile.appendChild(dot);
    tile.appendChild(playIcon);
    tile.appendChild(lbl);
    gallery.appendChild(tile);

    tile.addEventListener("mouseenter", () => vid.play());
    tile.addEventListener("mouseleave", () => {
      vid.pause();
      vid.currentTime = 0;
    });

    tile.addEventListener("click", () => {
      lbVideo.src = src;
      lbVideo.currentTime = 0;
      lightbox.classList.add("open");
      lbVideo.play();
    });
  });

  closeBtn.addEventListener("click", closeLightbox);
  lightbox.addEventListener("click", (e) => {
    if (e.target === lightbox) closeLightbox();
  });

  function closeLightbox() {
    lbVideo.pause();
    lbVideo.src = "";
    lightbox.classList.remove("open");
  }

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") closeLightbox();
  });
</script>

</body>
</html>