One of the biggest challenges with Vine is being able to transfer the power of Vine as a mobile app into the desktop browser arena.
In this post we’ll give some tips on how to accomplish part of that: embedding and linking to Vine videos on your website.
Please note that all of these tips will vary depending on the type of phone operating system you have, desktop operating system, and web browser. Regardless of your configuration, it is all the same concept and can be done in the same steps.
In this post we will cover:
Follow these easy steps and you’ll be embedding Vines on your website in no time.
Start by firing up your Vine app. This post will assume you are using the Android version of the app but the iPhone version should be very similar, almost identical.
Create your video normally as you would, and then click on the “share” button.
(for the purpose of the video I did a very amateur job of a stop motion video with a few pens) 🙂
Share your Vine to Facebook. Twitter will also work but in this example we will sue Facebook.
Once you’ve titled or described your video, click the “post” button which will auto-magically post your Vine video to Facebook.
If you’ve done everything right, you’ll see the success message like so.
Now put down your phone and go to your computer. Navigate to Facebook and go to your Timeline. You should see something along the lines of this. Click on the video or the description of the video to view it.
At this point you will be presented with a few different options. In this example I chose “simple” with 320 pixels. Simple just shows the video with nothing fancy, the Postcard version cleans it up a little more and gives it a border and some other design features. Copy the code highlighted in the screenshot to your clipboard and hang on to it.
Once you have the code you can paste it into any HTML document. If you are pasting your Vine embed code into WordPress, be sure that you are pasting it into the text editor, and not the visual editor.
If you’ve followed these directions to a T, you will see a video just like this. Congratulations! You can now share Vine videos on the web.
The postcard version of Vine embedding looks like this:
Again, it just gives your video a border and cleans things up a little bit.
If you really want to take things to the next level and upload your video to YouTube or Vimeo, then follow these steps.
Linking to and/or emailing a Vine video from your website or blog is quite easy. Again, go back to the “embed” Vine Page on your desktop browser:
At this point you have several options:
(and how to save a Vine to your local hard drive)
Follow the above instructions, but again go back to the “embed” Vine page on your desktop browser:
Right click on the video and select “copy video location.” This will copy the location of the actual video (an MP4 file) to your clip board.
Pop open a new tab or browser window and paste the copied Vine URL into the URL bar.
You should see a plain Vine video in your browser window at this point.
Save your video by going to File > Save Page as. Save the video to your hard drive. I saved mine on my desktop since it was going to be deleted shortly after.
If your Vine video was saved correctly, you should see a really long and ugly file on your hard drive. You have now downloaded a copy of your Vine video and it is ready to upload onto YouTube, Vimeo or any other video sharing site. You can also upload the video to your website and embed directly.
Proof of concept. Here is the original Vine video that I recorded just about 10 minutes ago on my mobile phone. I shared it on Facebook, downloaded it, and then re-uploaded the MP4 file to YouTube. Personally I don’t see a lot of use for this but a lot of people asked so we thought we would share the easiest way we found.
Piece of cake. Simply upload the video that you’ve downloaded to your hard drive (use instructions above) or paste the embed code from the hosted embed Vine page and viola!
You can view the test Vine uploaded to our Tumblr account here.
This wasn’t as easy as the others, we had a difficult time. It would not allow us to upload the MP4 file as it was not a supported format at this tim. I suppose we could convert to a different format. It also would not allow us to do this so we have provided an alternative way:
Gran a snapshot of your video using the Windows Snipping Tool or some other software.
Upload that image as a Pin.
Edit the pin and paste the Vine URL into the “source” field.
This will not allow your Vine to play directly from Pinterest but it will give you a nice link, at least.
You can view the test Vine we pinned on Pinterest here.
Sharing a Vine on other social networks is easy. Google+ allows you to share Vine videos in a myriad of ways. You can upload the MP4 direct, as a YouTube video, embed it directly or link to it as a video. Other social networks allow you to do the same.
I hope you enjoyed this instructional post on how to work with a Vine video, how to download a Vine video to your hard drive, how to upload a Vine video to YouTube, and how to embed a Vine video into your site or WordPress blog.
If you have any question about how to do any of the above with a Vine video on a different operating system or web browser such as Safari, Windows 7, Firefox, Opera, Linux, Chrome, etc just give us a shout or leave a comment and we will be more than happy to help you.
We're glad you stopped by. We blog about SEO to contribute to the community, and to help educate those looking to learn more about it.
Part 1 - An SEO's Guide to Tumblr
Part 3 - The value of Tumblr links revisited