Play Flickr videos inside Colorbox [#2335639]

Per your request in this issue:
https://www.drupal.org/node/549654

I am opening a new request for playing embedded Flickr videos in the Colorbox overlay. To clarify, I would like to have the thumbnails of all my videos appear in a photoset grid. (They do.) Then when you click on one, just as it pops up a larger version of an image in the Colorbox overlay, I would like for each thumbnail of a video to pop up the medium size video using the Flickr embedded media player in the Colorbox overlay, so my viewers can watch the video on my website without needing to leave it and go to the Flickr site.

@webservant316 mentioned several great links in the previous thread:

https://www.drupal.org/node/1099580

http://www.jacklmoore.com/colorbox/example2/

http://code.flickr.net/2008/05/01/videos-in-the-flickr-api/

I've found a few more links that may help. According to the Colorbox FAQ here:
http://www.jacklmoore.com/colorbox/faq/
in order for YouTube videos to play in Colorbox, they need to be embedded. I'm hoping/assuming that is the same issue for Flickr.

According to the Flickr link above
http://code.flickr.net/2008/05/01/videos-in-the-flickr-api/
Flickr videos must be embedded with the Flickr media player. This page tells you how to get the variables and generate the embed code.

I hope this is enough. Your Flickr module is great and solved a headache for me. This would be the icing on the cake, just making the solution perfect.

Comment	File	Size	Author
#9	videos_in_colorbox-2335639-9.patch	5.31 KB	lolandese
#6	videos_in_colorbox-2335639-6.patch	2.58 KB	lolandese

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

lolandese CreditAttribution: lolandese commented 9 September 2014 at 20:32

Status:

Active

» Closed (won't fix)

Also, from the same page at http://code.flickr.net/2008/05/01/videos-in-the-flickr-api/:

We don’t currently provide a way to get to the FLV for a video. (the Flash encoded video file) We’re looking into making this possible. In the mean time if you want to display watch-able videos you’ll need to embed our video player.

This is the main difference with YouTube videos. it confirms a bit what most people say; use YouTube to embed your videos and Flickr for your photos.

If you really insist on showing Flickr videos in Colorbox, you have to use their player in an iframe as described at http://stackoverflow.com/a/5469953. I think it will be far from ideal compared with simply using YouTube or another third party video host.

Nonetheless patches are welcome, but I think you agree that the investment isn't worth it, if it provides an inferior solution. Sorry.

In any case, thanks for the request, as it is good to check these things out. The day that Flickr offers videos in a common video format, this issue can be reopened.

Comment #2

lolandese CreditAttribution: lolandese commented 9 September 2014 at 20:46

Some more info at https://www.drupal.org/node/1127030. Not too encouraging either.

Comment #3

cindyr CreditAttribution: cindyr commented 10 September 2014 at 12:02

Status:

Closed (won't fix)

» Active

So I'm stuck with Flickr videos for this client. I delved into it for a couple of hours, and here's what I came up with. This is ideal, if the thumbnail link returned the same result as the test text link on this page:

<div style="display: none;">
    <div id="myFlickrVideo">
         <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" data="https://www.flickr.com/apps/video/stewart.swf" type="application/x-shockwave-flash" height="270" width="480">
                  <param name="flashvars" value="intl_lang=en-US&amp;photo_secret=ce3d512cfe&amp;photo_id=8732370682&amp;hd_default=false">
                  <param name="movie" value="https://www.flickr.com/apps/video/stewart.swf"><param name="bgcolor" value="#000000">
                  <param name="allowFullScreen" value="true"><embed allowfullscreen="true" bgcolor="#000000" flashvars="intl_lang=en-US&amp;photo_secret=ce3d512cfe&amp;photo_id=8732370682&amp;hd_default=false" src="https://www.flickr.com/apps/video/stewart.swf" type="application/x-shockwave-flash" height="270" width="480">
         </object>
    </div>
</div>

<p>
   <a class="colorbox-inline" href="https://www.flickr.com/photos/emeraldglendoves/8732370682/?width=480&amp;height=280&amp;inline=true#myFlickrVideo">
       Click this to play the inline content Flickr video in a Colorbox iframe
   </a>
</p>

As you can see, rather than embedding their page on the site, which I could not get to work properly, I embedded their swf video player on my page, then opened it as inline content into Colorbox. Is this a path that you would be willing to take with the Flickr module?

Comment #4

lolandese CreditAttribution: lolandese commented 10 September 2014 at 20:11

Is this a path that you would be willing to take with the Flickr module?

Just tried your code and ... yes, it works better as I expected.

In this moment I can only work on this bit by bit in the evening hours and I will, but it will go slowly. Though, I will look into anything that comes from your side and am open to include it. Patches are always committed with attribution.

I suggest you take a look at the function theme_flickr_flickrcomslideshow_simple in flickr.module to have an idea of how the slideshow is implemented and make a variation on it with your snippet.

Thanks for your research and snippet. It makes a good start.

Comment #5

cindyr CreditAttribution: cindyr commented 11 September 2014 at 14:55

I will take a look. Be forewarned, I dink around in PHP, have written a couple of extremely simple custom modules, but am really not able to call myself a coder. I'll see what I can do though...

Comment #6

lolandese CreditAttribution: lolandese commented 19 September 2014 at 23:30

Status:

Active

» Needs review

File	Size
videos_in_colorbox-2335639-6.patch	2.58 KB

Attached patch should provide the desired functionality.

Comment #7

lolandese CreditAttribution: lolandese commented 20 September 2014 at 02:23

Oops! Remove dsm($photo); from the patch (or enable Devel).

Comment #8

lolandese CreditAttribution: lolandese commented 22 September 2014 at 15:07

To add a condition to see if Colorbox with 'colorbox-inline' is enabled.

Comment #9

lolandese CreditAttribution: lolandese commented 29 September 2014 at 09:48

File	Size
videos_in_colorbox-2335639-9.patch	5.31 KB

In the attached patch:

Added a condition to see if Colorbox with 'colorbox-inline' is enabled.
Corrected the wrapping to play nicely with the AutoFloat module.
Added the following instructions to the README.txt:
Settings in Colorbox to enable playing an embedded video in it

Go to '/admin/config/media/colorbox'.

Select the checkbox 'Enable Colorbox inline' and 'Save configuration'.

Clear your site cache (https://drupal.org/node/42055).

Comment #10

29 September 2014 at 20:10

lolandese committed a389c7d on 7.x-1.x authored by cindyr

Issue #2335639 by cindyr: Play videos within Colorbox.

Comment #11

lolandese CreditAttribution: lolandese commented 29 September 2014 at 20:12

Status:

Needs review

» Fixed

Comment #12

lolandese CreditAttribution: lolandese commented 29 September 2014 at 20:59

The only glitch is that when navigating to next images by clicking on them in Colorbox, it will open the Flickr page if it's a video, instead of taking you to the next picture. The navigating buttons work though as expected, as does navigating using the keyboard arrow keys.

It's not ideal, but neither a deal breaker.

Thanks for your contribution.