Gigya, Html & inline css codes, Shortcodes, Sidebar, Text widgets, Videos, Widgets

Inserting Kickstarter videos

Posted by Panos ⋅ April 29, 2011 ⋅ 18 Comments

https://wpbtips.wordpress.com/

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:

Copypaste the code from that point up to the height and width tags, and paste it into a simple text file. Example:

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:

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):

Flash embed code from the sourcecode of the video alone (variables in red):

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/

Please don’t paste code in comments – see comment guidelines.

About these ads

Discussion

18 thoughts on “Inserting Kickstarter videos”

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.

Posted by portaleazzurro | April 29, 2011, 19:45
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.

Posted by Panos | April 29, 2011, 19:56
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.

Posted by portaleazzurro | April 29, 2011, 20:06
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.

Posted by Panos | April 29, 2011, 20:11
I found it!
the code should look in the tools menu (F12).
Thanks Panos for us to discover new things!
Regards.
Franco.

Posted by portaleazzurro | April 29, 2011, 20:23
Thanks for introducing me to Kickstart videos!

Posted by Tess | May 2, 2011, 19:11
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/

Posted by Panos | May 2, 2011, 20:43
Hi Panos,
the interactive video at 360 degrees actually missing …
Watching them work on my blog is fantastic!

Thanks !
Franco.

Posted by portaleazzurro | May 2, 2011, 23:44
@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?

Posted by Tess | May 3, 2011, 02:54
@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!

Posted by Panos | May 4, 2011, 03:03
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…

Posted by Tess | May 9, 2011, 21:17
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.

Posted by portaleazzurro | May 9, 2011, 22:18
@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):

Posted by Panos | May 10, 2011, 03:14
Thank you so much for this post! :D Solved an epic issue I had with embedit.in!

Posted by LoboDragon the Bilingual One | May 26, 2011, 02:09
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?

Posted by Panos | May 26, 2011, 12:31
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

Posted by Sami Salameh | March 21, 2012, 03:10
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

Posted by Panos | March 21, 2012, 03:21