Video wordt mini-speler Nieuw

Een video in een artikel die, als hij speelt en je verder leest, als kleine speler in de hoek blijft hangen (zoals bij nieuwssites). Klik op de mini-speler om terug te scrollen, het kruisje stopt de video en zet hem terug. IntersectionObserver ziet wanneer de video uit beeld gaat; de overgang is een korte FLIP-animatie, zonder animatie bij minder beweging. Hier binnen een eigen scrollvak, op een echte pagina gebruik je de 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.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- 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'));

Meer uit componenten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →