harbinger labs mobile logo
February 4, 2013

Embed Vine Video

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.

Screen Shot 2014-01-24 at 10.34.23 AM

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.

Share with your peeps
Created By

Travis

I'm a skier, hiker, biker and runner. In my free time I write about the world of marketing. I also started this company, but who cares.

What to read next

Working With Keyword Themes