Video wordt mini-speler New

A video in an article that, once playing and you read on, sticks around as a small player in the corner (as on news sites). Click the mini player to scroll back, the cross stops the video and docks it again. IntersectionObserver notices when the video leaves the view; the transition is a short FLIP animation, without animation for reduced motion. Here inside its own scroll box, on a real page you use the viewport.

Houtwerkplaats Van Dijk opent tweede werkplaats in Kampen

Na twaalf jaar aan de Pannekoekendijk in Zwolle was de werkplaats te klein. Sinds september staat er in Kampen een tweede hal van 600 m² met een eigen spuitcabine.

Daar maken vier meubelmakers tafels, kasten en trappen op maat. Klanten kunnen op afspraak langskomen om hout uit te zoeken; de levertijd voor een eiken tafel is nu drie weken.

"We kregen meer aanvragen dan we konden maken," zegt eigenaar Ruben van Dijk. "Met de tweede hal kunnen we ook trappen weer aannemen."

Voor de nieuwe hal zoekt het bedrijf nog twee meubelmakers en een leerling. Wie wil komen kijken, kan zich aanmelden via de website of bellen met 038 765 4321.

In Zwolle blijven de showroom en de kleinere klussen. Daar staat ook de verzameling restanten waar klanten een plank voor een wandtafel of boekenplank kunnen uitkiezen.

De open dag is op zaterdag 15 november van 10.00 tot 16.00 uur aan de Zuiderzeestraatweg in Kampen.

Parkeren kan op het eigen terrein. Met de fiets is het tien minuten vanaf station Kampen.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Video wordt mini-speler · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="msp">
<div class="msp__sc" tabindex="0" aria-label="Artikel met video, scroll om verder te lezen">
<article class="msp__art">
<h3 class="msp__h">Houtwerkplaats Van Dijk opent tweede werkplaats in Kampen</h3>
<div class="msp__slot">
<div class="msp__pl">
<video class="msp__v" preload="metadata" playsinline poster="https://neddev.com/lab-media/videospeler-eigen-1.webp" aria-label="Rondleiding door de werkplaats, 22 seconden"><source src="https://neddev.com/lab-media/videospeler-eigen-film.mp4" type="video/mp4"></video>
<button class="msp__play" type="button" aria-label="Video afspelen"><svg class="msp__i-pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z"/></svg><svg class="msp__i-pa" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg></button>
<button class="msp__back" type="button" aria-label="Terug naar de video in het artikel"></button>
<button class="msp__x" type="button" aria-label="Mini-speler sluiten"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2"/></svg></button>
</div>
</div>
<p class="msp__p">Na twaalf jaar aan de Pannekoekendijk in Zwolle was de werkplaats te klein. Sinds september staat er in Kampen een tweede hal van 600 m² met een eigen spuitcabine.</p>
<p class="msp__p">Daar maken vier meubelmakers tafels, kasten en trappen op maat. Klanten kunnen op afspraak langskomen om hout uit te zoeken; de levertijd voor een eiken tafel is nu drie weken.</p>
<p class="msp__p">"We kregen meer aanvragen dan we konden maken," zegt eigenaar Ruben van Dijk. "Met de tweede hal kunnen we ook trappen weer aannemen."</p>
<p class="msp__p">Voor de nieuwe hal zoekt het bedrijf nog twee meubelmakers en een leerling. Wie wil komen kijken, kan zich aanmelden via de website of bellen met 038 765 4321.</p>
<p class="msp__p">In Zwolle blijven de showroom en de kleinere klussen. Daar staat ook de verzameling restanten waar klanten een plank voor een wandtafel of boekenplank kunnen uitkiezen.</p>
<p class="msp__p">De open dag is op zaterdag 15 november van 10.00 tot 16.00 uur aan de Zuiderzeestraatweg in Kampen.</p>
<p class="msp__p">Parkeren kan op het eigen terrein. Met de fiets is het tien minuten vanaf station Kampen.</p>
</article>
</div>
</div>
</div>

/* Video wordt mini-speler · NedDev · eigen werk. */
.msp{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.msp__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;outline:none}
.msp__sc:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.msp__art{padding:14px 16px 24px;max-width:520px;margin:0 auto}
.msp__h{margin:0 0 10px;font:600 17px/1.25 'Switzer',sans-serif;letter-spacing:-.01em}
.msp__slot{position:relative;aspect-ratio:16/9;background:#0a0a0a;border-radius:4px;margin-bottom:12px}
.msp__pl{position:absolute;inset:0;border-radius:4px;overflow:hidden;background:#0a0a0a;z-index:2}
.msp__pl.is-mini{box-shadow:0 8px 24px rgba(10,10,10,.28)}
.msp__v{display:block;width:100%;height:100%;object-fit:cover}
.msp__play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;border-radius:8px;background:#F5480F;color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.msp__play svg{width:22px;height:22px;fill:currentColor}
.msp__i-pa{display:none}.msp.is-playing .msp__i-pl{display:none}.msp.is-playing .msp__i-pa{display:block}
.msp.is-playing .msp__pl:not(.is-mini):not(:hover):not(:focus-within) .msp__play{opacity:0}
.msp__pl.is-mini .msp__play{left:8px;top:auto;bottom:8px;margin:0;width:30px;height:30px}
.msp__pl.is-mini .msp__play svg{width:16px;height:16px}
.msp__back{display:none;position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:pointer;padding:0}
.msp__x{display:none;position:absolute;right:6px;top:6px;z-index:2;width:26px;height:26px;padding:0;border:0;border-radius:4px;background:rgba(10,10,10,.7);color:#fff;place-items:center;cursor:pointer}
.msp__x svg{width:14px;height:14px}
.msp__pl.is-mini .msp__back{display:block}
.msp__pl.is-mini .msp__x{display:grid}
.msp__play:focus-visible,.msp__x:focus-visible,.msp__back:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.msp__p{margin:0 0 10px;font:400 14px/1.55 'Switzer',sans-serif;color:#2a2927}

// Video wordt mini-speler · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.msp');if(!w)return;
var sc=w.querySelector('.msp__sc'),slot=w.querySelector('.msp__slot'),pl=w.querySelector('.msp__pl'),v=w.querySelector('.msp__v'),play=w.querySelector('.msp__play');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,mini=false,dismissed=false,inView=true;
function toggle(){if(v.paused){var p=v.play();if(p&&p.catch)p.catch(function(){});dismissed=false;}else v.pause();}
function sync(){var p=!v.paused&&!v.ended;w.classList.toggle('is-playing',p);play.setAttribute('aria-label',p?'Video pauzeren':'Video afspelen');}
v.addEventListener('play',sync);v.addEventListener('pause',sync);v.addEventListener('ended',function(){sync();if(mini)dock(false);});
play.addEventListener('click',toggle);v.addEventListener('click',toggle);
/* het element blijft in de DOM staan (verplaatsen zou de video pauzeren); alleen positie en maat wisselen */
function miniRect(){var W=w.clientWidth,mw=Math.min(180,Math.round(W*.46)),mh=Math.round(mw*9/16);return{left:W-mw-10,top:w.clientHeight-mh-10,width:mw,height:mh};}
function dock(toMini){if(toMini===mini)return;var a=pl.getBoundingClientRect();mini=toMini;
if(mini){var r=miniRect(),wr=w.getBoundingClientRect(),sr=slot.getBoundingClientRect();pl.classList.add('is-mini');pl.style.cssText='position:absolute;inset:auto;left:'+(r.left-(sr.left-wr.left))+'px;top:'+(r.top-(sr.top-wr.top))+'px;width:'+r.width+'px;height:'+r.height+'px';
/* containing block = slot (position:relative) maar slot scrolt mee, dus per scroll bijwerken */}
else{pl.classList.remove('is-mini');pl.style.cssText='';}
var b=pl.getBoundingClientRect();if(rm||!pl.animate)return;var dx=a.left-b.left,dy=a.top-b.top,sx=a.width/b.width,sy=a.height/b.height;
pl.animate([{transformOrigin:'0 0',transform:'translate('+dx+'px,'+dy+'px) scale('+sx+','+sy+')'},{transformOrigin:'0 0',transform:'none'}],{duration:260,easing:'cubic-bezier(.2,.8,.2,1)'});}
function follow(){if(!mini)return;var r=miniRect(),wr=w.getBoundingClientRect(),sr=slot.getBoundingClientRect();pl.style.left=(r.left-(sr.left-wr.left))+'px';pl.style.top=(r.top-(sr.top-wr.top))+'px';}
sc.addEventListener('scroll',follow,{passive:true});
new IntersectionObserver(function(es){es.forEach(function(e){inView=e.intersectionRatio>.5;if(!inView&&!v.paused&&!dismissed)dock(true);else if(inView)dock(false);});},{root:sc,threshold:[0,.35,.6,1]}).observe(slot);
w.querySelector('.msp__back').addEventListener('click',function(){sc.scrollTo({top:slot.offsetTop-14,behavior:rm?'auto':'smooth'});});
w.querySelector('.msp__x').addEventListener('click',function(){v.pause();dismissed=true;dock(false);play.focus();});
if('ResizeObserver' in window)new ResizeObserver(follow).observe(w);
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →