Using Video

Overview

There are multiple ways to add video to your application, website, or blog. We'll start with the easiest way, to the most advanced way. The complexity of adding video is directly correlated to the size of the video, the video origin, and most importantly, the capabilities of the server your website is hosted with.

Please Note: sometimes, depending on the technical circumstances, importing may be difficult or impossible.

 

Easiest - "Sideloading" from YouTube or Vimeo

Our admin panels have the ability to directly import video from YouTube or Vimeo. We call this "sideloading" -- loading a file from one server on the internet to another server on the internet. Note: you are bound by the rules of copyright and terms of use of these services. This functionality is offered as a tool to help you distribute video you have the rights to.

Sideloading is a very simple process. All you need is the url of the video in one of these two formats:

http://www.youtube.com/watch?v=xUUCwrtX66c

or for Vimeo:

http://www.vimeo.com/2206508

You do not need the embed code that is given to you by these services. Embed code is strictly for streaming the video from their website to yours in a html page. What sideloading does is it makes a copy of the video available on your server.

To sideload video:

  • copy the url of the video in one of the above formats
  • open any Upload Dialog
  • paste the url into the sideload area "Sideload from server (http://)"
  • click "Sideload"
  • wait for the "watch" icon to become the green "ok" icon.

If everything succeeded, and the video imports correctly, you will get a green icon that tells you it worked. If you now close the Upload Dialog box, you will see the video will be in the asset list.

If the video import did not succeed, it may be due to the following reasons:

  • incorrect url structure
  • the video file is so large that the time it takes to move from one server to the other is more than your server allows
  • you have exceeded your disk space
  • your server does not allow for this type of connection

You can, of course, try a few times to see if it's just a timing issue. Or you can continue on to the next section.

 

Moderate - Use Clipnabber service

Chances are, if the sideload method does not work, it's probably due to the size of the video, or the timeout on your server where your site is hosted. Clipnabber -- a video download service can help you bridge the gap, by allowing you to download your files to your computer instead. To download your video:

    * visit http://clipnabber.com/
    * paste in the url of the video page in the "Paste the video URL below"
    * click on "Download FLV" or "Download MP4"
    * return to your admin panel
    * open any Upload Dialog
    * upload your .flv or .mp4 file like you would any image or file

This method should work flawlessly with few exceptions. If the upload fails, here are some possible (probable) causes:

    * the file you are uploading is larger than your allocated maximum upload size for your web hosting.
          o you can see what your upload limit is by going to Dashboard > System Info > Maximum Upload Size
          o if the video file is larger than this value, there is nothing we can do. you can contact your host to see if they can up this value for you.
    * the file is taking too long to upload, and you are exceeding your maximum connection time

If you are encountering either of these two issues, you can continue to the next section.


More Complicated - Use FTP and then Sideload

If you cant directly import your file from YouTube or Vimeo, and your server cannot upload your file because of the upload size/connection time, you'll need to use FTP to upload your .flv or .mp4 to your server by using FTP.

    * open up your favorite FTP client
    * connect to your server
    * browse to your document root, and create a temporary location to upload your movie(s) to, like "tempmovies"
    * upload your movies to this folder
    * once it's uploaded, return to your admin panel
    * open any Upload Dialog
    * write the ABSOLUTE url to your uploaded file (http://mywebsite.com/tempmovies/mymovie.flv or just /tempmovies/mymovie.flv)
    * click "Sideload"
    * wait for the "watch" icon to become the green "ok" icon.

This file should instantaneously copy your movie into media list, since instead of transferring it over the internet, it makes a direct copy of the file in your filesystem. Once the copy/import is successful, you may delete the original file you uploaded.


Seriously Advanced - Make your own videos

Flash supports .flv's and h.264 encoded .mp4's. If you don't to use Vimeo or YouTube to create your video files, you are free to create and encode movies from any application that creates flash-capable video files. This process is outside the scope of this support page, but here are some links on how you can create these movies:

    * http://www.wikihow.com/Convert-MOV-to-MP4-and-HD-MP4-With-Quicktime-Pro-7
    * http://www.mediacollege.com/adobe/flash/video/tutorial/export-flv.html

Once you have created a viable movie file, you can follow the upload/sideload direction from the "Moderate" or "More Complicated" sections above.


Final Step - Creating the Screenshot

OK! So, hopefully you have now sideloaded/imported/uploaded a video file, and it's now showing up in your asset list. The final step is to create a initial screenshot image the video player will display for the user to click on to initiate playback.

Your video file should look like a greyed out film strip with a question mark. In the bottom right corner of this graphic there is a button that looks like a camera. Click that button, and it will open up the "Capture Video Screenshot" Dialog.

    * scrub the timeline to a place in the video that you think captures the essence of the video
    * click "Save Snapshot of Current Frame"
    * once complete, click the "Close" button
    * you're done!

Overview

There are multiple ways to add video to your application, website, or blog. We'll start with the easiest way, to the most advanced way. The complexity of adding video is directly correlated to the size of the video, the video origin, and most importantly, the capabilities of the server your website is hosted with.

Please Note: sometimes, depending on the technical circumstances, importing may be difficult or impossible.

 

 

Easiest - "Sideloading" from YouTube or Vimeo

Our admin panels have the ability to directly import video from YouTube or Vimeo. We call this "sideloading" -- loading a file from one server on the internet to another server on the internet. Note: you are bound by the rules of copyright and terms of use of these services. This functionality is offered as a tool to help you distribute video you have the rights to.

Sideloading is a very simple process. All you need is the url of the video in one of these two formats:

http://www.youtube.com/watch?v=xUUCwrtX66c

or for Vimeo:

http://www.vimeo.com/2206508

You do not need the embed code that is given to you by these services. Embed code is strictly for streaming the video from their website to yours in a html page. What sideloading does is it makes a copy of the video available on your server.

To sideload video:

  • copy the url of the video in one of the above formats
  • open any Upload Dialog
  • paste the url into the sideload area "Sideload from server (http://)"
  • click "Sideload"
  • wait for the "watch" icon to become the green "ok" icon.

If everything succeeded, and the video imports correctly, you will get a green icon that tells you it worked. If you now close the Upload Dialog box, you will see the video will be in the asset list.

If the video import did not succeed, it may be due to the following reasons:

  • incorrect url structure
  • the video file is so large that the time it takes to move from one server to the other is more than your server allows
  • you have exceeded your disk space
  • your server does not allow for this type of connection

You can, of course, try a few times to see if it's just a timing issue. Or you can continue on to the next section.

 

Moderate - Use Clipnabber service

Chances are, if the sideload method does not work, it's probably due to the size of the video, or the timeout on your server where your site is hosted. Clipnabber -- a video download service can help you bridge the gap, by allowing you to download your files to your computer instead. To download your video:

  • visit http://clipnabber.com/
  • paste in the url of the video page in the "Paste the video URL below"
  • click on "Download FLV" or "Download MP4"
  • return to your admin panel
  • open any Upload Dialog
  • upload your .flv or .mp4 file like you would any image or file

This method should work flawlessly with few exceptions. If the upload fails, here are some possible (probable) causes:

  • the file you are uploading is larger than your allocated maximum upload size for your web hosting.
    • you can see what your upload limit is by going to Dashboard > System Info > Maximum Upload Size
    • if the video file is larger than this value, there is nothing we can do. you can contact your host to see if they can up this value for you.
  • the file is taking too long to upload, and you are exceeding your maximum connection time

If you are encountering either of these two issues, you can continue to the next section.

 

More Complicated - Use FTP and then Sideload

If you cant directly import your file from YouTube or Vimeo, and your server cannot upload your file because of the upload size/connection time, you'll need to use FTP to upload your .flv or .mp4 to your server by using FTP.

  • open up your favorite FTP client
  • connect to your server
  • browse to your document root, and create a temporary location to upload your movie(s) to, like "tempmovies"
  • upload your movies to this folder
  • once it's uploaded, return to your admin panel
  • open any Upload Dialog
  • write the ABSOLUTE url to your uploaded file (http://mywebsite.com/tempmovies/mymovie.flv or just /tempmovies/mymovie.flv)
  • click "Sideload"
  • wait for the "watch" icon to become the green "ok" icon.

This file should instantaneously copy your movie into media list, since instead of transferring it over the internet, it makes a direct copy of the file in your filesystem. Once the copy/import is successful, you may delete the original file you uploaded.

 

Seriously Advanced - Make your own videos

Flash supports .flv's and h.264 encoded .mp4's. If you don't to use Vimeo or YouTube to create your video files, you are free to create and encode movies from any application that creates flash-capable video files. This process is outside the scope of this support page, but here are some links on how you can create these movies:

Once you have created a viable movie file, you can follow the upload/sideload direction from the "Moderate" or "More Complicated" sections above.

 

Final Step - Creating the Screenshot

OK! So, hopefully you have now sideloaded/imported/uploaded a video file, and it's now showing up in your asset list. The final step is to create a initial screenshot image the video player will display for the user to click on to initiate playback.

Your video file should look like a greyed out film strip with a question mark. In the bottom right corner of this graphic there is a button that looks like a camera. Click that button, and it will open up the "Capture Video Screenshot" Dialog.

  • scrub the timeline to a place in the video that you think captures the essence of the video
  • click "Save Snapshot of Current Frame"
  • once complete, click the "Close" button
  • you're done!
Have more questions? Submit a request

Comments

  • 523e04e4c3b85899ccb7eda31fb9e6eb?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    doug stroud

    This is a great primer tutorial, thanks!

  • John.naccarato
    John Naccarato

    Followed all of this, but it didn't continue on actually HOW to post it into Wordpress.  I couldn't (for some reason) figure it out, and had to cut and paste the embed code.  Please post the final steps to get it into your post. 

    Thank you.

  • 11536a0f94fd1e936cc3885919c4dec6?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Jordan Weiland

    Is there a way to insert video and have it automatically play without having the viewer click a play button?

  • Img_0075_b
    michael sablone

    @jordan -- it will auto-play video if there is more than one (for infopages) and if autoplay is set to true for albums.

  • 35b19e7a5611029c0fd7e748530a8477?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Ning Wong

    whenever I try and save a screenshot, i get the error :
    ERROR: [onAddPixelBlock] HTTP error null

    and then the screenshot won't save.

    how do i fix this? 

  • B60dd237324244ec9426b4411a13f991?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Sylvain Gentile

    I too am getting the same message as the last commenter... When trying to save a snapshot for the video.

    This is the message I continue to get...

    ERROR: [onAddPixelBlock] HTTP error null

    Anyway to make this work?

  • 35b19e7a5611029c0fd7e748530a8477?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Ning Wong

    nope.  support said there would be an update to the interface which would fix this...but it didn't.

    extremely frustrating and annoying.  

  • B60dd237324244ec9426b4411a13f991?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Sylvain Gentile

    Seriously?!.. How can their demo site have working videos, but it will not work for the customers?.. If support is reading this... I've tried the "easy", "moderate" and "more complicated" options detailed above, still no luck!

  • 35b19e7a5611029c0fd7e748530a8477?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Ning Wong

    yes, seriously.  

    before the update, i emailed support about this issue.  they replied back:
    "we are going to be releasing an update to fix the video issue in the coming days please be on the look out."

    that was it.

    i waited for the release about 2 weeks later.  i happily updated.  then i tried to make a snapshot...and....BOOM. same error.

    this issue actually happened to me last year, and when i emailed support, they just told me to call them and they would create the thumbnail for me.

    of course, this is NOT a solution.....just a work around.  hence, i don't really update my videos on my website since it's a pain in the ass to get it to work. 

  • Img_0075_b
    michael sablone

    @ning & @sylvain:

    we try really hard to please everyone.  the problem is not with our software, it's with your hosting company, and with the 3rd party software we're forced to integrate with.  if you see an error like "ERROR: [onAddPixelBlock] HTTP error null" -- it means your server does not have the resources (in terms of memory or cpu time) to convert the raw bitmap pixels into a data structure that can be read and parsed by the GD library.  sadly, not all hosting companies are created equally -- there are thousands upon thousands of server configurations out there, and we can't possibly make our products work with every one.

    @ning -- i'm not totally sure what the issue with yours is -- you are on dreamhost, a verified host.  i just sideloaded a video from youtube and created a snapshot in your website admin, all of which happened fluidly and without a hitch.

    @sylvain -- this is a hosting issue for you buddy.  sorry.

    some more thoughts about video, updates, and this topic in general:

    we try as much as possible to keep our sideloading mechanism working.  but at the end of the day, sideloading is not a guarantee -- it's a privilege.  we built the sideloading mechanism so that you wouldn't have to worry about producing your video in the right codec, or creating it with the right bitrate, or understanding how to make a video period.  youtube and vimeo are great at that already, so we try to piggyback on them for your sake -- not ours.  not only that, but most hosting companies (read: dreamhost, for example) cap their uploads to either 2, 7 or 32mb.  videos are usually in the 100's of megabytes, so traditional uploads won't work.  again, sideloading is there for your benefit to alleviate all the complexities of creating, uploading, and hosting your videos.

    the issue with sideloading is that we are at the mercy of youtube and vimeo.  when they change their website, file structure, or api's -- our systems fail.  in the past 2 years we've probably updated the sideload codebase at least 10 times.  that's a lot of (free) updates for something that we offer as a kindness for people who want to use video in their flash websites.  in fact, right now, vimeo is in a state of disarray, they have dropped their moogaloop api and we're now page-scraping.  the issue is they keep changing their minds on their embed eco-systems, so right now, we've dropped support for vimeo until their site "evens out".  youtube has been stable for months now.

    for video screenshots, we use a 3rd party plugin that is written in actionscript and php and uses the GD library.  it was written by mario klingemann -- a link to him and his site is right there on the screenshot application.  he wrote it, and we do not maintain it.  it's either going to work on your server, or not, but should be totally fine on most traditional LAMP stacks.

    at the end of the day, i think it's important to remember that video, in any format, under any circumstance, and by any definition, is not easy.  there is a reason why services like youtube and vimeo exist in the first place -- because video is such a complex animal.  flash player?  html5?  h.264 mp4 vs flv vs webm vs ogg theora?  vbr vs cbr?  what is the best bitrate?  hd?  sd?  the options, questions, methods, and answers are endless.  we do our best to make it easy on you -- if you have a server that is up to snuff, you're 5 clicks away from having all these problems solved for you.  if video is truly that important to your business, perhaps a change in hosting providers might be in order.  both of our recommended hosts have no such issues with sideloading nor creating screenshots of video: http://intothedarkroom.com/hosting/ (http://intothedarkroom.com/hosting/)

    i would also like to close this response with asking you to maintain a certain level of respect for one another.  this support forum is not censored, but it is indeed monitored.  let's keep the language clean, and the questions and answers civilized.  if you have major gripes with our service or product, this is not the forum for that kind of discussion.  i recognize that the "squeaky wheel gets the grease" mentality exists, but in this case, on this topic, on this forum, it will get you nowhere other than having us consider dropping support for sideloading and video screenshots entirely.

  • Screen_shot_2011-09-17_at_8.33.08_am
    Malia Johnson

    Is there any way to add the video into the actual blog POST itself?  I'd love to get a video into a single blog post.  Thanks in advance for your help!

     

  • About_me_photo
    Lisa Govea

    @Malia yes if you'd like to add a video into a blog post you actually still have the option to use Vimeo or Youtube and use their " Embed " feature.

    1. Copy the embed code from Vimeo or Youtube

    2. go to blog post and click the HTML tab to the right top corner

    3. paste in embed code and save.

  • Screen_shot_2011-09-17_at_8.33.08_am
    Malia Johnson

    Thanks @Lisa! 

  • 9b2f7fe78dc6730c8dcdea1010edb3b0?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Bhavesh Patel

    i cant get any of these above methods to work and i have been trying for several hours

    vimeo method - error cannot copy local file

    youtube method - can use this as youtube copyrights most of the music songs

    clipnabber - worked when the file was small, but when i downloaded the larger file says the file is too large

    ftp method - error cannot copy local file

    i have been trying for quite sometime and our business runs of this without this service our website is rendered useless can you please assist me on this situation as a matter of urgency.

  • C9bcca22aa63f9ab0f0e9f5c8915dee7?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    John Parker

    hey all. 

    i'm trying to sideload from vimeo and i keep getting this error code

    Error: Url Does Not Exist (vimeo.com/47420938)

    I've tried with a bunch of different vimeo videos but none seem to work...

    I'm on the naked clove template....

    Anybody got any ideas?

  • D35433d58330786ce836e20b3ec21a49?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Daniel Woods

    How can you make the video not full screen? If the original video is small, it will look like crap full screen.  Is this even possible I can't see how to embed on my about page.

  • Img_0075_b
    michael sablone

    everyone:  we just released an update to the sideloading process, and it's currently working with youtube and vimeo.  you'll need to run an update.  so @Bhavesh (http://support.intothedarkroom.com/users/75752237), @John Parker (http://support.intothedarkroom.com/users/252991878) -- give it a shot.

    @Daniel Woods (http://support.intothedarkroom.com/users/257379613) - have you submitted a ticket?  we can help you out.

  • D7bcbdea68a0d40177a102559db697f7?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Stefan Simonsen

    Why do the videos on the clove demo site play without a full load? On my installation they have to load up to end before they play. Despite the fact, that no Vimeo- or Youtube-Import works.

    Thx

  • 8a4868f226328d3d28863149593fa010?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Christine LoRicco

    having alot of issues, trying to upload a 3minute video into my portfolio gallery of images.  Nothing works for me!

  • 35b19e7a5611029c0fd7e748530a8477?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Ning Wong

    So after over a year, i am having the SAME issues still.  Support says that it's my system.  

    I tried making a thumbnail on my PC desktop, my macbook pro, even my wife's computer.  all no go.  I've used chrome, safari, IE, firefox.  nothing works.  All my system files are updated and i'm running the latest Flash as well.

    @michael it's been over a year ....have there been any new updates or fixes for this?  thx

Please sign in to leave a comment.