Mobilevenlig præsentation af Youtube videoer:

Umiddelbart er jeg ikke den store tilhænger af carousels når de bliver brugt som et “opsigtsvækkende markedsføringsværktøj”. Det skyldes at UX research har vist, at de sjældent bliver brugt og ofte skaber mere forvirring end gavn hvilket jeg også selv kan nikke genkendene til. Jeg synes dog, at de kan være glimrende til, at præsentere indhold som f.eks. billeder på en kompakt måde.

I forbindelse med et website jeg lavede for et lydstudie fik jeg til opgave, at præsenterer en række musikvideoer som ejeren af studie havde været involveret i. Min første tanke var, at lave et responsive grid med videoerne. Denne løsning ville dog ikke være god på smartphones da den ville resultere i en meget lang side. Jeg valgte derfor, at lave et plugin bygget på Bootstrap’s carousel og Youtube’s iFrame API. Da jeg er i gang med, at optimere plugin’et til Bootstrap 4 vil jeg vente med at ligge det op på min GitHub. Jeg har istedet lave et CodePen du kan bruge som inspiration.

Bemærk: Der er en bug med CodePen der gør at du skal rerun’e koden hvis du scroll’er væk fra embed vinduet. Koden virker dog fint og er testet på en del sider.

See the Pen Bootstrap 3 Youtube Carousel by Rune Stenstrøm (@RuneStenstroem) on CodePen.