Update January 2014: This post was written in early 2013, a time when Vine didn’t allow native embedding. Vine does now allow embedding of it’s videos, which can be explored further in this post on their blog. However, if you want to embed a Vine without a title overlay or extraneous #hashtaggery, then the below solution will work perfectly.
I’m sure marketers everywhere have been wondering how to embed a Vine video on their websites. It’s a new medium and new way to share content, so why wouldn’t they?
Below is a simple way to plop a fresh, shiny and new Vine video on your site:
Step One:
Since you can’t actually go to Vine and search through videos, you’ll need to connect Twitter with Vine and tweet out the video link.
In the image above you’ll see the link vine.co/v/bjHh0zHdgZT that’s what we’ll need to embed this bad boy.
Step Two:
From here it’s just simple HTML. Use the following embed code below:
<iframe src="http://vine.co/v/YOUR-VIDEO-ID/card" frameborder="0" width="600" height="600"></iframe>
The default output of a Vine vid is 600px X 600px, you can change this to a value that best suits your needs, just keep it square. You’ll also notice the /card at the end of the video, this is important otherwise you’ll get an unsightly iframe scroll and you don’t want that.