Hacking Vine: How to embed a Vine video on to your website

Vine is Twitter's new video sharing service that has digitall comms types all a flutter. 

It's format is simple but different to others: snap a 6 second video or compilation of segments and post it to vine, Twitter and Facebook. 

One very interesting element of Vine videos is they can be embedded on to your website in a couple of ways. 

The most common way you will see Vines embedded is like this: 

To do this you find the tweet with the Vine video in it, click the More link on the tweet and copy the embed code. Paste it on to your website HTML code and you'll see something like the below. Simple!

Stop motion on #vine is SUPER EASY - here's Sunday @33digital vine.co/v/bJK51E9V9Dp

— Peter Sigrist (@psigrist) January 27, 2013

I've been playing about with Vine since it launched and thought I'd share another way to embed videos on your site as it's quite straightforward but not as obvious.

To embed just the video without the tweet, paste the below code into the HTML of your site. Replace the red part of the URL with the URL of your Vine video, and you're done. 

<p><iframe src="http://vine.co/v/bJK51E9V9Dp/card" width="380" height="380" frameborder="0"></iframe></p>

Your video should look like this. 

Thanks to 33 Digital's Pete Sigrist whose video is far better than any I've made to date :)

 

Comments

[Psigrist]

Thanks for the awesome tip Drew - simple yet effective :)

[Scott]

Without tweeting it, how do you determine the URL for the Vine video to use it as in your second example?

[Drew]

@Scott - the only way you can see the URL is if your video has been shared outside of Vine. Ie Twitter or Facebook. Once you have the URL then you can share it anywhere, but the Vine app doesn't show you the URL right now

[Moira]

Hi Drew - Thank you for this info. I couldn't get Twitter's code to load and yours worked. I think it looks more "arty" for my blog Dog Art Today, too. http://dreamdogsart.typepad.com/art/2013/01/dogs-on-vine-not-just-porn.html

[Robin_Red]

Thanks Drew,

This is an amazing tip. I've used this in a 'How To' in my blog.

Cheers,

Robin