download html5 video player with playlist

Here I am using Font Awesome’s chevron icon for the left and right arrows. Wrap the whole thing in another div with class of “vid-list-container”.īelow the playlist code add the Left & Right arrow buttons with the following code: Then wrap your playlist in a div with class of “vid-list”. Simply copy and paste this and update the onClick, thumbnail img src, and description for each video in your playlist.

You should now have one video in your playlist with the code looking like this: The other parameters “rel”, “showinfo” and “autohide” are not necessary. Add “?autoplay=1” to ensure that the video starts playing automatically. Obviously you want to use the URL to the corresponding YouTube video. This simply looks for the iframe and sets it’s src to the specified URL. To accomplish this we add an onClick property to the “vid-item” as follows: We want the YouTube player to load and play the selected video. Jessica Hernandez & the Deltas - Dead Brains My first video has an ID of “eg6kNoJmzkY” and I want to use the first poster image so I set my img src to “”. You can get these using the URL “” followed by the video ID and the image file name.

In this case I decided to use YouTube’s auto-generated poster image for the thumbnail images. These are both contained in a div with class of “vid-item”. Later we’ll use the CSS properties for both to control the layout and ensure responsiveness.Įach video in our playlist will have a thumbnail image placed inside a div with class of “thumb” and a description placed in a div with class of “desc”. We’ll wrap the iframe in a div with a class of “vid-container”. The Playerįirst we need to embed the YouTube player using the iframe embed code. We’ll also ensure it’s responsive by using percent widths and some basic media queries. Since we are using YouTube’s iframe embed code it should work on all devices and serve up either the flash or HTML5 player automatically. The player we are building in this is based on the MyList Video Player, but instead of automatically populating with a YouTube playlist, we are manually building our own playlist of selected YouTube videos. The playlist will scroll or slide left and right on click or tap. Below the iframe we’ll add a horizontal playlist that includes a thumbnail image and title for each video. In this post we will work with an embedded YouTube video player using YouTube’s iframe embed code.

Download html5 video player with playlist