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

[Jennifer]

Perfect! This just made my life easier.

[Paula]

Is there any way to download your videos? Or does the user not have ownership of the content?

Thanks

[Matthew Scott]

Hi Drew,

A quick question. I've embedded my Vine using your method. Without the /card the sound plays by default. Did you come across a way to play the sound but still embed the Vine this way.

Thanks,
Matt