Video embed that only shows if a post has a video file. Very important for site speed if enabling video uploads for your community.
<!-- 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>
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 = `
`;
// 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 = `
`;
} else {
// Sound on icon
volumeBtn.innerHTML = `
`;
}
}
// Event listeners
playBtn.addEventListener('click', togglePlay);
video.addEventListener('timeupdate', updateTime);
progressBar.addEventListener('click', seekVideo);
volumeBtn.addEventListener('click', toggleMute);
}
</script>
