How to Embed Vine Videos Just About Anywhere

I love Vine, the app that lets you make unedited, six-second, looping videos. The six-second time limit is pretty confining, but this is what makes me love it so much. It's like a personal challenge to see if I can document a whole drugstore trip that way, and you know what? I can!

The Vine app doesn't offer up ready-made embed code for you to paste your precious videos into your own site, but you can still do it.

How to embed a Vine video:

• Tweet your video on Twitter.
• Copy and paste the following code into your website.
• Replace the red part of the url with the Vine url that showed up when you tweeted your video.

<p><iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe></p>

UPDATE: If your video sizing seems funky, which can happen with this code in Tumblr, iWeb, and I'm sure some other places, try specifying the height and width in pixels rather than percentages:

<p><iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="500px" height="500px" frameborder="0"></iframe></p>

And voilà! Now you can share six seconds of your cats being really high on catnip with all of your friends.

Enjoy!

Comments

[Katherine]

Awesome! As soon as I started recording these I wanted to know how I could share them on the web. Now I know. Thanks!!

[Victoria]

Thanks for this, I've just started using Vine for my travel blog about Gran Canaria and it's nice to know I can embed them with your handy code! Good work!

[BusyDad]

You made my day

[Nikki Mans]

Woohoo! Thanks for sharing!

[noelskeulen]

I used the code as explained, but in tumbler (and iWeb) it shows only the upper part of the Vine. Do you have an idea what the problem could be?
Noel

[noelskeulen]

to show the issue, here is a link to my tumblr post http://noelskeulen.tumblr.com/post/46161649231

[Schmutzie]

Noelskeulen, my code shows height and width as percentages. You might have to use actual pixel amounts to achieve the same effect. For example:

<p>< iframe src="VINEURL/card?mute=1" width="500px" height="500px" frameborder="0"></p>

Let me know if this works!

[noelskeulen]

It worked to change 100% by the required px! thanks!

<p></p>

[Tammy Eakes]

Awesome! Thank you! I poked around trying to figure out how to do this for an hour. One quick search on Google and your post came up ... and it worked! thanks!

[Tammy Eakes]

Yesterday I was so excited bc I got my Vine videos to work on my Square Space site. Thank you again for that! Today I am trying to do the same thing in Wordpress (I write for someone who wants the html from Wordpress). I am using the same code you suggested...the same code that worked in SS but it is not working. When I click on save or Update all of my code is deleted. Help please!

[Schmutzie]

Tammy Eakes, before you paste in the code, click the "Text" button in the upper right above the text box to switch to text editing. WordPress should allow you to enter iframe code there.