How to embed Vine videos on WordPress blog

Vine videos are rage over the internet. Vine service supported by Twitter allows you to create short videos of upto 6 seconds. You can share these videos on Twitter and Facebook websites. Similarly bloggers can easily embed, display and share Vine videos on their WordPress blogs. There are number of ways to embed and show Vine videos on WordPress websites.

1. Only show Vine video on WordPress blog

Goto WordPress dashboard, click ‘add new post’ to start with new post article. Click on Text button to switch post editor to text only mode and then paste the following code:

1
<iframe src="http://vine.co/v/b1Mbu3EDtI5/card" height="400" width="400" frameborder="0"></iframe>

tweet-vine-video

In the above code, you can modify Vine video URL (vine.co/v/b1hUq3V5iIY) and height – width settings as per requirement.

2. Embed Tweet that has Vine video attachment

Just goto ‘Text’ mode of the post editor and then paste the URL of the Tweet containing Vine video as attachment. For example, paste following:

1
https://twitter.com/BasicWP/status/297309764889739264

Above will show box containing tweet message and then attached Vine video. This will not work, if you have disabled auto embeds on the WordPress (by default auto embed feature is enabled in WordPress).

3. Using embed code for a Tweet with Vine video

Just open Tweet message with the Vine video, for example like this and then click on More button. Then click Embed Tweet option and copy the displayed code.

tweet-vine-video-embed-code

Paste that code in your WordPress blog post while using editor in ‘text’ only mode. This will display whole tweet message along with Vine video in a neat wrapper box.

Video: Using embed code to show Vine videos

Preview of Vine video embed here

SHARE

Comments

  1. Thank you for sharing this – I am so excited :)

    I compiled a recap of my week! juliegibbons.com/2013/02/06/greetings-from-the-vine/

  2. Thanks for this post. I’ve been having a lot of fun with Vine but couldn’t figure out how to embed them on my blog. Problem solved thanks to you!

  3. Hi!!
    Any idea on how to make it works on mobile screen?
    Thanks!
    Philippe

  4. bababababaab says:

    thank you

  5. Thanks for the tips! I struggled with embedding the tweet and the video together because the WP post preview page only showed the tweet, but no video. Finally I just published it anyway and then the real post actually showed both. :)

  6. please help! i’m working on a draft. i followed all your steps. hit “save draft” and the code disappears. this happens with preview as well. do you know what could be wrong?
    thanks!

  7. I’ve inserted the embed code into a post I’m working on and when I preview the post (I even published it to check too) only some text and a link to the tweet show up. The first time I embeded it showed the video…but anything after that…just the text. How can I fix that?

  8. Thanks for this guide. I have linked back to it from my blog. You may need to point out however that the iframe embedding code used to embed the vine without a surrounding tweet isn’t allowed on WordPress.com blogs. The only one of your methods that works on WordPress.com blogs is the tweet embed where you just enter the URL of the tweet directly into the post editor (it doesn’t matter if its the visual or text editor – it works in both). Thanks

    • Yeah I got my hopes up and have tried everything to get this to work on a WordPress.COM blog & nothing works :( Well, I can “embed” the tweet but it doesn’t include the media and it just shows up as a blockquote. Grrr.

  9. Thanks for finally talking about >How to embed Vine videos on WordPress blog <Loved it!

Speak Your Mind

*

Subscribe to our mailing list

* indicates required
Close