Adding video to a slideshow

Ok! Update already. On the wishlist for this slideshow project is to also include a video as well. And it was much easier than expected!

I’m quite confident that there is a better way to do this, but this is working currently.

If you check out my last post about the slideshow, you’ll see that each element has the class of “mySlides,” so I embedded a YouTube video, gave it the same class, and then set it up to autoplay. This is what that code looks like.

<iframe class=”mySlides” width=”560″ height=”315″ src=”https://www.youtube.com/embed/Okc8iSzPWRA?autoplay=1″ frameborder=”0″ gesture=”media” allow=”encrypted-media” allowfullscreen></iframe>

The “?autoplay=1” tells the youtube url to play as soon as the page loads. Only issue here is that the video starts playing long before you can see the video. This is probably not going to be an issue, since there will be no audio with this slideshow.

If you remember in my last post about the slideshow, you’ll remember that I had that page set to refresh every 70 seconds. So I will have to update that refresh time if I want to play through the entire video. And basically every time the video comes up in the slideshow, it’ll just show which ever part is happening since the video is constantly playing.

 

No comments

Leave a Comment

Your email address will not be published. Required fields are marked *