Embed Flickr Video (limited workaround)

Posted by bryanburke on 02 Aug 2008 04:31, last edited by bryanburke on 09 Aug 2008 02:25

Tags: embed flickr iframe video

rating: +3+x

This page has been placed into the archive due to it being old, out-dated or containing unhelpful information.

Thanks developers for the support!

Introduction

This HowTo describes how to embed Flickr Video using an @iframe@.

NOTE: This is only intended to be a temporary workaround until hopefully full support for Flickr Video is added. This workaround is limited because fullscreen video does not work.

I have submitted an embed service request for Flickr Video here: Flickr Video. If you like this workaround and would also like to see full support for this service added, please leave a rating and/or comment on the request page.

The video used in this HowTo is not mine. It is (c) 2008 Dan Budiac under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic license. The original video can be found here.

What You Get

HowTo Get It

Step 1 — Code Burglar

Click the </> EMBED button above the video you wish to embed. Customize the video settings to your liking, and copy the embed code. You will get something similar to this:

<object type="application/x-shockwave-flash" width="500" height="375" 
data="http://www.flickr.com/apps/video/stewart.swf?v=55430" 
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> 
<param name="flashvars" 
value="intl_lang=en-us&amp;photo_secret=17e24437ff&amp;photo_id=2405820614&amp;show_info_box=true"></param> 
<param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=55430"></param> 
<param name="bgcolor" value="#000000"></param> 
<param name="allowFullScreen" value="true"></param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=55430" 
bgcolor="#000000" allowfullscreen="true" 
flashvars="intl_lang=en-us&amp;photo_secret=17e24437ff&amp;photo_id=2405820614&amp;flickr_show_info_box=true" 
height="375" width="500"></embed></object>

Step 2 — Filet o' Code

Strip down the embed code to obtain only the @embed@ tag toward the end. This is what you get from the example above:

<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=55430" 
bgcolor="#000000" allowfullscreen="true" 
flashvars="intl_lang=en-us&amp;photo_secret=17e24437ff&amp;photo_id=2405820614&amp;flickr_show_info_box=true" 
height="375" width="500">

Step 3 — @ispy@ an @iframe@

Create a generic @iframe@, such as this:

<iframe align="center" src="" frameBorder="0" width="" height="" scrolling="no"></iframe>

Step 4 — I Heard It from a Reliable Src

Use the src value from the @embed@ (step 2) as the src value in the @iframe@ (step 3):

<iframe align="center" src="http://www.flickr.com/apps/video/stewart.swf?v=55430" frameBorder="0" 
width="" height="" scrolling="no"></iframe>

Step 5 — &Amp; It Up!

Add "&amp;" to the end of the @iframe@'s src value:

<iframe align="center" src="http://www.flickr.com/apps/video/stewart.swf?v=55430&amp;" frameBorder="0" 
width="" height="" scrolling="no"></iframe>

Step 6 — Got Vars?

Copy the entire flashvars value from the @embed@ (step 2) and paste it directly after the "&amp;" you added to the end of the @iframe@'s src value (step 5):

<iframe align="center" 
src="http://www.flickr.com/apps/video/stewart.swf?v=55430&amp;intl_lang=en-us&amp;photo_secret=17e24437ff&amp;photo_id=2405820614&amp;flickr_show_info_box=true" 
frameBorder="0" width="" height="" scrolling="no"></iframe>

Step 7 — Size Things Up

Use the width and height values from the @embed@ (step 2) as the width and height values of the @iframe@.

Done — That's HowTo Do It!

The final code should look something like this:

<iframe align="center" 
src="http://www.flickr.com/apps/video/stewart.swf?v=55430&amp;intl_lang=en-us&amp;photo_secret=17e24437ff&amp;photo_id=2405820614&amp;flickr_show_info_box=true" 
frameBorder="0" width="500" height="375" scrolling="no"></iframe>

Now just place your completed @iframe@ inside an [[embed]] tag, and you're set!

Author

bryanburkebryanburke

rating: +3+x
Add a New Comment

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.