Video embed in collection list

Video embed that only shows if a post has a video file. Very important for site speed if enabling video uploads for your community.
Copy Code
<!-- Add this to your Webflow head code -->
<style>
  .video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
  }

  .video-element {
    width: 100%;
    height: auto;
    display: block;
  }

  .video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 20px 16px 12px;
    opacity: 0;
    transition: opacity 0.2s;
    color: white;
    pointer-events: none;
  }

  .video-wrapper:hover .video-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Timeline at the very top */
  .progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 12px;
  }

  .progress-fill {
    height: 100%;
    background: #1d9bf0;
    width: 0%;
    border-radius: 2px;
  }

  /* Controls below timeline */
  .controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn:hover {
    background: rgba(255,255,255,0.1);
  }

  .play-button {
    font-size: 20px;
    width: 32px;
    height: 32px;
  }

  .volume-icon {
    width: 20px;
    height: 20px;
  }

  .time-text {
    font-size: 13px;
    font-family: system-ui, sans-serif;
  }
</style>

<script>
var videoUrl = "{{wf {&quot;path&quot;:&quot;vid-file&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}";

if (videoUrl && videoUrl.trim() !== "") {
  videoUrl = videoUrl.trim();
  
  if (videoUrl.startsWith('//')) {
    videoUrl = 'https:' + videoUrl;
  } else if (!videoUrl.startsWith('http')) {
    videoUrl = 'https://' + videoUrl;
  }
  
  // Create the HTML structure directly
  var html = `
    <div class="video-wrapper">
      <video class="video-element" autoplay muted loop playsinline>
        <source src="${videoUrl}" type="video/mp4">
      </video>
      <div class="video-overlay">
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
        <div class="controls-bottom">
          <div class="controls-left">
            <button class="btn play-button">⏸</button>
            <span class="time-text">0:00 / 0:00</span>
          </div>
          <div class="controls-right">
            <button class="btn volume-btn">
              <svg class="volume-icon" viewBox="0 0 23 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.1 8.66007L19.58 10.0001C20.5228 11.1181 21.0249 12.542 20.9917 14.0041C20.9586 15.4662 20.3925 16.8659 19.4 17.9401L20.87 19.3001C22.1929 17.8664 22.9464 15.9989 22.9887 14.0486C23.0311 12.0983 22.3594 10.1998 21.1 8.71007V8.66007ZM16 28.0001C15.8677 27.9995 15.7368 27.9727 15.6149 27.9212C15.4931 27.8697 15.3826 27.7946 15.29 27.7001L7.67 20.0001H1C0.734784 20.0001 0.48043 19.8947 0.292893 19.7072C0.105357 19.5196 0 19.2653 0 19.0001V9.00007C0 8.73485 0.105357 8.4805 0.292893 8.29296C0.48043 8.10543 0.734784 8.00007 1 8.00007H7.67L15.29 0.30007C15.4774 0.113819 15.7308 0.00927734 15.995 0.00927734C16.2592 0.00927734 16.5126 0.113819 16.7 0.30007C16.8884 0.484701 16.9962 0.736301 17 1.00007V27.0001C17 27.2653 16.8946 27.5196 16.7071 27.7072C16.5196 27.8947 16.2652 28.0001 16 28.0001Z" fill="white"/>
              </svg>
            </button>
            <button class="btn">⛶</button>
          </div>
        </div>
      </div>
    </div>
  `;
  
  // Insert the HTML
  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  var videoContainer = tempDiv.firstElementChild;
  document.currentScript.parentNode.appendChild(videoContainer);
  
  // Get elements and add functionality
  var video = videoContainer.querySelector('.video-element');
  var playBtn = videoContainer.querySelector('.play-button');
  var timeSpan = videoContainer.querySelector('.time-text');
  var progressBar = videoContainer.querySelector('.progress-bar');
  var progressFill = videoContainer.querySelector('.progress-fill');
  var volumeBtn = videoContainer.querySelector('.volume-btn');
  
  // Functions
  function togglePlay() {
    if (video.paused) {
      video.play();
      playBtn.textContent = '⏸';
    } else {
      video.pause();
      playBtn.textContent = '▶';
    }
  }
  
  function updateTime() {
    if (video.duration) {
      var current = Math.floor(video.currentTime);
      var total = Math.floor(video.duration);
      var currentMin = Math.floor(current / 60);
      var currentSec = current % 60;
      var totalMin = Math.floor(total / 60);
      var totalSec = total % 60;
      
      timeSpan.textContent = `${currentMin}:${currentSec.toString().padStart(2,'0')} / ${totalMin}:${totalSec.toString().padStart(2,'0')}`;
      
      var progress = (video.currentTime / video.duration) * 100;
      progressFill.style.width = progress + '%';
    }
  }
  
  function seekVideo(e) {
    var rect = progressBar.getBoundingClientRect();
    var percent = (e.clientX - rect.left) / rect.width;
    video.currentTime = percent * video.duration;
  }
  
  function toggleMute() {
    video.muted = !video.muted;
    if (video.muted) {
      // Sound off icon
      volumeBtn.innerHTML = `
        <svg class="volume-icon" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M29 10.4101L27.59 9.00007L24 12.5901L20.41 9.00007L19 10.4101L22.59 14.0001L19 17.5901L20.41 19.0001L24 15.4101L27.59 19.0001L29 17.5901L25.41 14.0001L29 10.4101ZM16 28.0001C15.8677 27.9995 15.7368 27.9727 15.6149 27.9212C15.4931 27.8697 15.3826 27.7946 15.29 27.7001L7.67 20.0001H1C0.734784 20.0001 0.48043 19.8947 0.292893 19.7072C0.105357 19.5196 0 19.2653 0 19.0001V9.00007C0 8.73485 0.105357 8.4805 0.292893 8.29296C0.48043 8.10543 0.734784 8.00007 1 8.00007H7.67L15.29 0.30007C15.4774 0.113819 15.7308 0.00927734 15.995 0.00927734C16.2592 0.00927734 16.5126 0.113819 16.7 0.30007C16.8884 0.484701 16.9962 0.736301 17 1.00007V27.0001C17 27.2653 16.8946 27.5196 16.7071 27.7072C16.5196 27.8947 16.2652 28.0001 16 28.0001Z" fill="white"/>
        </svg>
      `;
    } else {
      // Sound on icon
      volumeBtn.innerHTML = `
        <svg class="volume-icon" viewBox="0 0 23 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.1 8.66007L19.58 10.0001C20.5228 11.1181 21.0249 12.542 20.9917 14.0041C20.9586 15.4662 20.3925 16.8659 19.4 17.9401L20.87 19.3001C22.1929 17.8664 22.9464 15.9989 22.9887 14.0486C23.0311 12.0983 22.3594 10.1998 21.1 8.71007V8.66007ZM16 28.0001C15.8677 27.9995 15.7368 27.9727 15.6149 27.9212C15.4931 27.8697 15.3826 27.7946 15.29 27.7001L7.67 20.0001H1C0.734784 20.0001 0.48043 19.8947 0.292893 19.7072C0.105357 19.5196 0 19.2653 0 19.0001V9.00007C0 8.73485 0.105357 8.4805 0.292893 8.29296C0.48043 8.10543 0.734784 8.00007 1 8.00007H7.67L15.29 0.30007C15.4774 0.113819 15.7308 0.00927734 15.995 0.00927734C16.2592 0.00927734 16.5126 0.113819 16.7 0.30007C16.8884 0.484701 16.9962 0.736301 17 1.00007V27.0001C17 27.2653 16.8946 27.5196 16.7071 27.7072C16.5196 27.8947 16.2652 28.0001 16 28.0001Z" fill="white"/>
        </svg>
      `;
    }
  }
  
  // Event listeners
  playBtn.addEventListener('click', togglePlay);
  video.addEventListener('timeupdate', updateTime);
  progressBar.addEventListener('click', seekVideo);
  volumeBtn.addEventListener('click', toggleMute);
}
</script>
Video embed in collection list

hello@supersparks.io
