Heeft iemand toevallig ervaring met de plugin: Selz/plyr
https://github.com/Selz/plyr

Ik probeer het onderdeel Youtube aan de praat te krijgen met autoplay functionaliteit.
Dit wil nog niet lukken en de handleiding brengt mij vooralsnog niet verder.
Iemand een idee?

Code:

plyr.setup({
    hideControls: true,
    autoplay: true
});

Code:

<div class="plyr">
    <div data-video-id="{{ youtube }}" data-type="youtube"></div>
</div>

Hallo Frank,

Ik moest zelf eigenlijk gelijk denken aan autostart: true

Groet,
Steven

Ik ben er achtergekomen dat plyr conflicteert met jcycle2.
jcycle2 wordt op de class row geinit. de div met de plyr zit in een row.

Initialiseren lukt dan niet. Wel als ik de class row van die parent div af haal.
Echter dan valt de movie buiten de jcycle2 slideshow. Dat is niet de bedoeling.

Ik moet dus iets zien te vinden om jcycle en plyr naast elkaar te laten draaien.

Code:

 
<div id="viewFooter" class="tickerSlideShow"

data-cycle-slides=".row"
data-cycle-fx="carousel"
data-cycle-speed="10000"
data-cycle-throttle-speed="true"
data-cycle-timeout="1"
data-cycle-easing="linear"
>
    <div class="row"><p>Slide 1</p></div>
    <div class="row"><p>Slide 2</p></div>
    <div class="row"><p>Slide 3</p></div>
    <div class="row"><p>Slide 4</p></div>
    <div class="row">
        <div data-type="youtube" class="youtube" data-video-id="bTqVqk7FSmY"></div>
    </div></div> 

Code:

$( '.tickerSlideShow' ).cycle();

Code:

var player = plyr.setup('.youtube', {
    autoplay: true,
    fullscreen: {
        enabled: true,
        fallback: false
}

})[0].plyr;

Denk dat je iets moet gaan doen met de 'cycle-before' event van Cycle2.

Dus iets als:

Code:

$(".ticketSlideShow").on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
if( incomingSlideEl == 4) {
var player = plyr.setup('.youtube', { autoplay: true, fullscreen: { enabled: true, fallback: false } })[0].plyr;
}
});

Waarbij 4 de slide van Youtube is, deze zal je wellicht ff moeten console.loggen om zeker te weten dat je de juiste hebt.

Het is gelukt! Dank

Origineel gepost door Frank Ramakers

Het is gelukt! Dank

You're welcome :)