Update May 2013: Kickstarter videos have a different sourcecode now. New instructions:
Visit the video page, select View Source from the menu bar of your browser and search for this:
<meta property="og:video:secure_url"
Copypaste the code from that point up to the height and width tags, and paste it into a simple text file. Example:
<meta property="og:video:secure_url" content="https://www.kickstarter.com/swf/kickplayer.swf?allowfullscreen=true&autostart=true&backcolor=000000&controlbar=over&file=https%3A%2F%2Fd2pq0u4uni88oo.cloudfront.net%2Fprojects%2F22818%2Fvideo-30465-h264_high.mp4&image=https%3A%2F%2Fs3.amazonaws.com%2Fksr%2Fprojects%2F22818%2Fphoto-full.jpg&screencolor=000000&skin=https%3A%2F%2Fwww.kickstarter.com%2Fswf%2Fkickskin.swf&wmode=opaque"/>
<meta property="og:video:height" content="420"/>
<meta property="og:video:width" content="560"/>
Copy the part from “backcolor” to “kickskin.swf” (highlighted in red in the above example), and paste it in place of VARIABLES in the following shortcode model:
[gigya src="http://www.kickstarter.com/swf/kickplayer.swf" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="VARIABLES" height="HHH" width="WWW" ]
Replace HHH and WWW with the actual height and width numbers. Paste the end result in the “Text” (=code) post or page editor.
[Original version of the post:]
If an embeddable video provides a flash embed code (no javascript or iframe), it can be inserted in a wp.com blog as explained in my posts The gigya shortcode 1 – inserting videos or The gigya shortcode 3 – inserting Flash.
Kickstarter videos can also be inserted that way, but you need a couple of extra steps to get to the flash code:
1. Click “EMBED”, copy code, paste into a simple text file.
2. Copy the URL of the video (from “http” to “video.html”), paste into the address bar of your browser, hit return to view the video alone.
3. Select View Source from the menu bar of your browser, copypaste the flash embed code; flash embed code looks like this:
<object ETC ETC ETC <param name="flashvars" value="VARIABLES HERE" /></object>
4. Copypaste the following shortcode model; cut the variables from the embed code and paste them where shown:
[gigya src="http://www.kickstarter.com/swf/kickplayer.swf" width="480" height="360" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="VARIABLES HERE" ]
5. Paste completed shortcode into HTML post/page editor or text widget.
Dimensions can, or must, be changed; see my posts on main column width and sidebar width.
Example
Kickstarter video page:
http://www.kickstarter.com/projects/flozowsky/up-against-the-wall
Initial embed code (video URL in red):
<iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/flozowsky/up-against-the-wall/widget/video.html" width="480px"></iframe>
Flash embed code from the sourcecode of the video alone (variables in red):
<object data-video-tracker-url="http://www.kickstarter.com/projects/flozowsky/up-against-the-wall/video/plays" data="//www.kickstarter.com/swf/kickplayer.swf" height="360" id="widget-video" name="widget-video" type="application/x-shockwave-flash" width="480"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="opaque" /><param name="menu" value="false" /><param name="flashvars" value="backcolor=000000&file=http%3A%2F%2Fs3.amazonaws.com%2Fksr%2Fprojects%2F22818%2Fvideo-30465-h264_high.mp4&image=http%3A%2F%2Fs3.amazonaws.com%2Fksr%2Fprojects%2F22818%2Fphoto-full.jpg&project_creators=A+Photography+project+by+Flo+Razowsky&project_title=Up+Against+The+Wall&project_url=http%3A%2F%2Fwww.kickstarter.com%2Fprojects%2Fflozowsky%2Fup-against-the-wall&screencolor=000000&skin=%2F%2Fwww.kickstarter.com%2Fswf%2Fkickskin.swf" /></object>
Shortcode:
[gigya src="http://www.kickstarter.com/swf/kickplayer.swf" width="480" height="360" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="backcolor=000000&file=http%3A%2F%2Fs3.amazonaws.com%2Fksr%2Fprojects%2F22818%2Fvideo-30465-h264_high.mp4&image=http%3A%2F%2Fs3.amazonaws.com%2Fksr%2Fprojects%2F22818%2Fphoto-full.jpg&project_creators=A+Photography+project+by+Flo+Razowsky&project_title=Up+Against+The+Wall&project_url=http%3A%2F%2Fwww.kickstarter.com%2Fprojects%2Fflozowsky%2Fup-against-the-wall&screencolor=000000&skin=%2F%2Fwww.kickstarter.com%2Fswf%2Fkickskin.swf" ]
Result:
https://wpbtips.wordpress.com/
Like this:
Like Loading...
Related
Hi Panos,
What does this mean? we can also insert the iframe code?
I placed the code in red Gigya and it works!
you managed to make the iframe code in embed code?
fantastic!
Franco.
No Franco, we can’t turn iframes into working shortcodes! I simply discovered that in this particular case the URL included in the iframe code can reveal a flash code. Doesn’t apply to any iframe.
I understand.
but inserting the link in red “http://www.kickstarter.com/projects/flozowsky/up-against-the-wall/widget/video.html”
in my browser (IE but I tried with Mozilla) to me, nothing appears in the status bar.
I don’t know about IE, as I’m a Mac user, but if you paste the link in the address bar of Safari or Firefox and press return, you get the video filling the whole browser window.
I found it!
the code should look in the tools menu (F12).
Thanks Panos for us to discover new things!
Regards.
Franco.
Thanks for introducing me to Kickstart videos!
Hi!
You find them interesting? I don’t know if they are: I made the post because I had several requests for it.
Maybe you’ll find these interesting too:
http://panosdemos.wordpress.com/2011/04/02/yellowbird-interactive-video/
Hi Panos,
the interactive video at 360 degrees actually missing …
Watching them work on my blog is fantastic!
Thanks !
Franco.
@Panos,
Interesting for a couple or so reasons.
I like the video you posted, the words of the woman making her presentation, “Up against the wall. Up against the wall…” just the words she spoke. combined with her images. and the rhythm. rhyme. repetition. Nicely done.
My daughter has been working on various projects for which she needs a little funding. Oh, a sort of personal reason, hoping for her success and the site might be of use to her…
And I saw a couple of presentations that interested me, posted today on my tess expressed site.
One I liked from the Kickstarter site was about a 360° lens (and software) for the iPhone. I don’t have an iPhone. But I was amazed at it until your last post about the yellowbird. (Well, still am.)
Re: yellowbird—(so you have another site?)
It made me dizzy!
Maybe I should start drawing with charred wood from the fireplace! The technology is like a roof: so far over my head!
Possibilities? I think so?
What would Samuel Becket say?
@Franco:
You’re welcome!
What do you mean by “missing”?
@Tess:
Of course I tried many videos, so that I could post an example I liked. Took me quite some time.
You found a video about 360° lenses and software, and at the same time I introduced you to Yellowbird? Ha!
That other blog is just for cases when I need to demonstrate something to someone in the forum.
What would Samuel Becket say? You always pose difficult questions!
I might could imagine this Beckett film in 360°:
though I suppose it would become only a way to explore Beckett’s idea of comfortable interior decoration—a long untapped market…
Hi Panos
I just wanted to express my admiration for your post in your blog saying that nothing is missing, not even a 360-degree interactive video!
greetings
Franco.
@Franco: Ah I see – I misunderstood and thought something wasn’t working right.
@Tess: Ah I see – I was trying to think of a poem or some other text. Right, some camera movements in that film seem to beg for 360°.
And you want to go dark? Here’s dark (best surreal film IMO):
Thank you so much for this post! :D Solved an epic issue I had with embedit.in!
You’re welcome, but (since this post is not about embedit.in, and since I’m not seeing anything relevant in the blog linked to your username) would you please elaborate?
I am confused, when I look at the source code for my video url I dont see anything resembling what you mentioned to look for. can you help? Heres my video’s url. Thanks!
http://www.kickstarter.com/projects/2132123318/beware-the-ides-of-march/widget/video.html
Maybe they changed things. The corresponding embed code you can find in the sourcecode is the part between the “object” tags. For the shortcode you need, click here:
http://textsnip.com/3fa2b8