Ready to get started?Download WordPress


Easy FancyBox
[resolved] Getting YouTube videos to play from sidebar (5 posts)

  1. jwhittaker99
    Posted 2 months ago #

    Hi, I'm having a problem getting YouTube videos to play in a FancyBox pop-up when they're in a sidebar. I've used both a simple text widget and Video Sidebar Widget to get the YouTube thumbnail into the sidebar, but when clicked the videos just play in the sidebar.

    Video Sidebar Widget doesn't allow you to input the actual URL, just the video ID. With the text widget though, YouTube's own embed code (inside iframe tags) doesn't work when clicked. I can, by using <a class="fancybox-youtube" href etc, get the video to play in the pop-up, but that's from a text link, not a thumbnail.

    Is there any way to get both? Thanks.


  2. RavanH
    Plugin Author

    Posted 2 months ago #

    You can convert your text link into a linked image. This is standard HTML. Just replace the text with an image tag so it will look like:

    <a href="https://www.youtube.com/watch?v=UNIQUE-MOVIE-ID" class="fancybox-youtube">
    <img src="http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg" style="width:100%;height:auto" />

    Other Youtube thumbnail sizes are http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/default.jpg and http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg so you can pick the size that is closest to (but preferably at least the same as) your sidebar width. And (obviously) you need to replace UNIQUE-MOVIE-ID with the ID of your Youtube video. This ID is the same as the one used by that video widget...

  3. jwhittaker99
    Posted 2 months ago #

    Hi, thanks for the quick reply. Those addresses don't actually work. Maybe YouTube changed something. But your reply put me on the right track and I found that this URL does work (at least at the moment) http://img.youtube.com/vi/ID/0.jpg. 0 is the default size (and the biggest) but you can have 1, 2 and 3, which all seem to be the same size.

    Thanks for your help.

  4. jwhittaker99
    Posted 2 months ago #

    Sorry, should have put that link (which goes nowhere) in a code box.

  5. RavanH
    Plugin Author

    Posted 2 months ago #

    Thanks for sharing!

    Strange that for example both http://i4.ytimg.com/vi/EnS19EPnezo/hqdefault.jpg and http://img.youtube.com/vi/EnS19EPnezo/0.jpg seem to work but it might not be case for all videos. In any case, the urls you found look more reliable so I'll update the documentation :)


You must log in to post.

About this Plugin

About this Topic