Adding multiple videos whilst controlling the layout and hiding the controls

Ask the community
, ,
1

I was wondering if anyone can help?

My client is a wedding videographer. On his site he has multiple videos and he wants them set up as a set of 6 wedding videos and another set of 6 elopement videos for his portfolio. He wants them in a specific layout which I can’t do with Pro Gallery.

He also wants a thumbnail over the video that either fades when it plays or that you can click to start the video. I have set it up using single video player but I either have to toggle off the controls (meaning users can’t stop and start or rewind the videos - or expand them) or I have the controls on and it just shows constantly with the Vimeo controls and not the thumbnail. I have tried Wix Video but that wasn’t great, I have tried Pro gallery but as i said they layout wasn’t right and I have tried Video Box. I also tried creating a CMS but i still can’t get it right.

Whats the best way to get the layout and functionality that we want?

Any help would be much appreciated!

2

To get the exact design and functionality you want, you will have some options for like…

  1. Using a HTML-COMPONENT…
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Video Portfolio</title>
  <style>
    body {
      margin: 0;
      font-family: "Segoe UI", sans-serif;
      background: #1a1a1a;
      color: #fff;
      padding: 2rem;
    }

    h2 {
      margin-top: 2rem;
      font-size: 2rem;
      border-bottom: 2px solid #555;
      padding-bottom: 0.5rem;
    }

    .video-section {
      margin-top: 1rem;
    }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 1rem;
    }

    .video-thumb {
      position: relative;
      padding-top: 56.25%; /* 16:9 ratio */
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      transition: transform 0.3s ease;
    }

    .video-thumb:hover {
      transform: scale(1.03);
    }

    .video-thumb .overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.4s ease;
    }

    .video-thumb .overlay .play-btn {
      font-size: 3.5rem;
      color: #fff;
      opacity: 0.8;
      transition: transform 0.3s ease;
    }

    .video-thumb:hover .play-btn {
      transform: scale(1.2);
    }

    .video-thumb iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: none;
    }

    .video-thumb.playing .overlay {
      opacity: 0;
      pointer-events: none;
    }

    .video-thumb.playing iframe {
      display: block;
    }

    @media (max-width: 768px) {
      body {
        padding: 1rem;
      }
      h2 {
        font-size: 1.5rem;
      }
    }
  </style>
</head>
<body>

  <h2>Wedding Videos</h2>
  <div class="video-section video-grid">
    <div class="video-thumb" style="background-image: url('https://i.vimeocdn.com/video/123456789-905x509.jpg');" data-vid="76979871">
      <div class="overlay"><div class="play-btn">▶</div></div>
    </div>
    <div class="video-thumb" style="background-image: url('https://i.vimeocdn.com/video/987654321-905x509.jpg');" data-vid="137857207">
      <div class="overlay"><div class="play-btn">▶</div></div>
    </div>
  </div>

  <h2>Elopement Videos</h2>
  <div class="video-section video-grid">
    <div class="video-thumb" style="background-image: url('https://i.vimeocdn.com/video/234567890-905x509.jpg');" data-vid="54802209">
      <div class="overlay"><div class="play-btn">▶</div></div>
    </div>
    <div class="video-thumb" style="background-image: url('https://i.vimeocdn.com/video/345678901-905x509.jpg');" data-vid="83425193">
      <div class="overlay"><div class="play-btn">▶</div></div>
    </div>
  </div>

  <script>
    document.querySelectorAll('.video-thumb').forEach(thumb => {
      thumb.addEventListener('click', () => {
        const videoId = thumb.getAttribute('data-vid');
        const isPlaying = thumb.classList.contains('playing');
        
        // Clear previous content
        thumb.innerHTML = '';

        if (!isPlaying) {
          const iframe = document.createElement('iframe');
          iframe.src = `https://player.vimeo.com/video/${videoId}?autoplay=1&title=0&byline=0&portrait=0`;
          iframe.allow = "autoplay; fullscreen";
          thumb.appendChild(iframe);
          thumb.classList.add('playing');
        } else {
          const overlay = document.createElement('div');
          overlay.className = 'overlay';
          overlay.innerHTML = `<div class="play-btn">▶</div>`;
          thumb.appendChild(overlay);
          thumb.classList.remove('playing');
        }
      });
    });
  </script>

</body>
</html>

  1. ADD HTML-COMPONENT onto your PAGE (iFrame).

  2. COPY the provided code-example and paste it into your new html-component.

    2025-06-23 02_31_02-Window
    2025-06-23 02_31_02-Window615×629 26.7 KB

  3. Save your HTML-COMPONENT including the new code.

  4. Publish your website.

  5. Open your website including the HTML-COMP.

  6. You already should be able to see something like …

    2025-06-23 02_31_47-Window
    2025-06-23 02_31_47-Window696×522 10.5 KB

Next steps would be to upgrade the example code and connect your wix-page with the HTML-COMPONENT for communication and DATABASE-USAGE → giving you the possibility to load videos from databse (CMS).

Another option would be to use a CUSTOM-ELEMENT, which would give you even more options.

Good luck!

3

Thank you! I will give this a go!