I couldn’t find anything online for this so i’m hoping this will come up when similar people search on google for an answer.
Iframes didn’t work for me - they prevented scrolling when you hover over them. No online fix worked for me.
Here is the code i’ve ended up with for a videoplayer with a simple minimalist controls and thumbnail, plain white and small.
I’m using this on readymag to avoid ugly YouTube UI. I create a ‘code widget’ then copy paste this code into the ‘widget code’ section of the widget.
Scroll down to the section titled DIV and you will see
data-poster=“YOURTHUMBNAILHERE”
data-video=“YOURVIDEOHERE”
Replace the internal of those quotes with your relevant links. If using dropbox link then replace ‘dl=0’ at the end of your link with ‘raw=1’.
You can duplicate the code widget and change out those links for as many videos as you want on your page.
Code here:
<style>
.video-widget {
position: relative;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
background: black;
overflow: hidden;
}
/* Poster */
.video-widget .poster {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
/* Play button */
.video-widget .posterPlayBtn {
font-size: 25px;
color: white;
background: transparent;
border-radius: 50%;
width: 70px;
height: 70px;
border: none;
cursor: pointer;
}
/* Video */
.video-widget .myVideo {
display: none;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Controls */
.video-widget .controls {
position: absolute;
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px;
z-index: 3;
background: transparent;
box-sizing: border-box;
opacity: 0; /* start hidden */
transition: opacity 0.3s ease;
pointer-events: none; /* prevent clicks when hidden */
}
/* Show controls on hover */
.video-widget:hover .controls {
opacity: 1;
pointer-events: auto; /* allow clicks when visible */
}
/* Buttons */
.video-widget .playPauseBtn,
.video-widget .muteBtn,
.video-widget .fullscreenBtn {
background: none;
border: none;
color: white;
font-size: 15px;
cursor: pointer;
padding: 0;
user-select: none;
}
/* Progress bar */
.video-widget .progress {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
cursor: pointer;
background-image: linear-gradient(to right, white, white);
background-size: 0% 100%;
background-repeat: no-repeat;
}
.video-widget .progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0;
height: 0;
background: transparent;
border: none;
margin-top: 0;
}
.video-widget .progress::-moz-range-thumb {
width: 0;
height: 0;
background: transparent;
border: none;
cursor: pointer;
}
/* Mute icon */
.video-widget .muteBtn svg {
fill: white;
width: 24px;
height: 24px;
pointer-events: none;
}
</style>
<div class="video-widget">
<div class="poster" role="button" aria-label="Play Video"
data-poster="YOURTHUMBNAILHERE">
<button class="posterPlayBtn" aria-label="Play Video">▶</button>
</div>
<video class="myVideo" muted playsinline preload="metadata" tabindex="0"
data-video="YOURVIDEOHERE">
<source src="" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="controls">
<button class="playPauseBtn" aria-label="Pause Video">⏸</button>
<input type="range" class="progress" min="0" max="100" value="0" aria-label="Video progress" />
<button class="muteBtn" aria-label="Mute">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 9v6h4l5 5V4l-5 5H5z" />
</svg>
</button>
<button class="fullscreenBtn" aria-label="Fullscreen">⛶</button>
</div>
</div>
<script>
const initializedWidgets = new WeakSet();
function initVideoWidget(widget) {
if (initializedWidgets.has(widget)) return;
initializedWidgets.add(widget);
const poster = widget.querySelector('.poster');
const posterPlayBtn = widget.querySelector('.posterPlayBtn');
const video = widget.querySelector('.myVideo');
const controls = widget.querySelector('.controls');
const playPauseBtn = widget.querySelector('.playPauseBtn');
const progress = widget.querySelector('.progress');
const muteBtn = widget.querySelector('.muteBtn');
const muteIcon = muteBtn.querySelector('svg');
const fullscreenBtn = widget.querySelector('.fullscreenBtn');
poster.style.backgroundImage = \url(‘${poster.getAttribute(‘data-poster’)}’);
const videoSrc = video.getAttribute('data-video');
video.querySelector('source').src = videoSrc;
video.load();
function positionControls() {
const videoRect = video.getBoundingClientRect();
const widgetRect = widget.getBoundingClientRect();
controls.style.top = (videoRect.bottom - widgetRect.top - controls.offsetHeight) + 'px';
controls.style.left = (videoRect.left - widgetRect.left) + 'px';
controls.style.width = videoRect.width + 'px';
}
posterPlayBtn.addEventListener('click', () => {
video.style.display = 'block';
controls.style.display = 'flex';
poster.style.display = 'none';
video.muted = false;
video.play();
setTimeout(positionControls, 10);
});
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸';
} else {
video.pause();
playPauseBtn.textContent = '▶';
}
});
video.addEventListener('timeupdate', () => {
if (video.duration) {
const percent = (video.currentTime / video.duration) * 100;
progress.value = percent;
progress.style.backgroundSize = \${percent}% 100%;
}
});
progress.addEventListener('input', () => {
if (video.duration) {
video.currentTime = (progress.value / 100) * video.duration;
progress.style.backgroundSize = \${progress.value}% 100%;
}
});
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
if (video.muted) {
muteIcon.innerHTML = '<path d="M16.5 12l3.5 3.5-1.5 1.5L15 13.5l-3.5 3.5-1.5-1.5L13.5 12 10 8.5l1.5-1.5L15 10.5l3.5-3.5 1.5 1.5L16.5 12z" />';
} else {
muteIcon.innerHTML = '<path d="M5 9v6h4l5 5V4l-5 5H5z"/>';
}
});
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) video.requestFullscreen?.();
else document.exitFullscreen?.();
});
video.addEventListener('ended', () => {
controls.style.display = 'none';
video.style.display = 'none';
poster.style.display = 'flex';
playPauseBtn.textContent = '▶';
});
window.addEventListener('resize', () => {
if (!video.paused) positionControls();
});
video.addEventListener('loadedmetadata', positionControls);
}
// Initialize all existing widgets
document.querySelectorAll('.video-widget').forEach(initVideoWidget);
// Observe future widgets added to the DOM (for Readymag duplicates)
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.classList.contains('video-widget')) {
initVideoWidget(node);
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
</script>