Change the First Frame of Your Embedded Video and Have it Start Playing Automatically

In the video below, I’ll show you how you can modify the Screencast.com embed code so you can use whatever image you want as the first frame. The first frame is what appears behind the Play button before the viewer clicks it. Since many videos start with a fade from black, the first frame is black. This isn’t always the best first impression.

Update: The image you use for the first frame should be hosted on Screencast.com. The video is not clear on this, and it won’t work if you reference an image on Flickr, etc.

I’ll also show you how you can add a special “flashvar” so the video starts plays as soon as the viewer loads the page. This can be a little disconcerting and a lot of people like to be in control of starting the video. (Click here to jump right to the part about auto-playing videos.)

  • XEN

    Hello!

    Thanks for the information. This looks really useful as I get into screencast.

    Could you help me with one question: what is the maximum file size upload limit for free accounts? Can I upload upto 2 GB size files, which is the maximum storage for free accounts?

    (didn’t see this info anywhere, and my files are at least 100 mb.. thanks for answering!)
    Thanks!

  • Anonymous

    Hi Xen,

    If you use the desktop uploader, (http://www.screencast.com/tools.aspx) you can upload files up to 2 GB in size. 2 GB is the limit, even if one has a Pro level account.

    Good luck with your screencasts!
    Mike Curtis

  • bongoman

    Hi I’m using screencast.com. But my videos take a long time (more than 2 minutes) just to start streaming. The videos are about 10 minutes long each and I use MP4 as format.

    The users see a black page and they think something is wrong.

    Before I upgrade to the professional edition I have to have this working.

    Questions: are the videos streamed once the user presses the play button or do the videos need to download completely before being played.

    How can I speed up the downloading of the videos?

    My users have a speed of 10 mb per second. So I don’t understand why it takes so long to show something.

    You can test a video on http://www.congalessen.nl/jupgrade/index.php/aanbod-lessen

    Thanks

  • Mike Curtis, TechSmith

    I think I can help. Please check out this post to see if your video is optimized for streaming: http://feedback.techsmith.com/techsmith/topics/what_happened_to_screencast_quality

  • http://www.exerciseyourway.com Francesca

    How do I put a powerpoint title slide as the first slide? Also, I played it in jing but can seem to capture it. How is this done?

  • Mike Curtis

    Hello Francesca,

    Depending on what version of PPT you use, I believe there is an option to save the slides as images. That is one way to work with them without trying to capture them.

    Another idea is to capture the slide in the “Normal” (editing) view–not in the full screen presentation mode. I would imagine that could work without resizing the image unless your video dimensions are very large.

    Mike Curtis, TechSmith

  • http://mehr-neukunden.com Enrico

    hallo, für uns deutsche ist das nicht immer so einfach zu verstehen. ich hoffe ich bekomme es auf unserer webseite http://mehr-neukunden.com/ noch hin

  • http://RenegadeMarketerPro.com Kari Baxter

    I’m trying to get my screencast video to autoplay. In this video you show flashvars. The code from my video doesn’t have flashvars. It has param. There are 2 places it has autoplay = false. I changed them both to “true” but it still doesn’t autoplay.

    Any other suggestions?

    Thanks,
    Kari

  • http://RenegadeMarketerPro.com Kari Baxter

    As a follow up to my previous comment, what about playcount value = 1 and starttime value = 0. Do I have to change either of those?
    Thanks again!
    Kari

  • Mike Curtis, TechSmith

    Kari, are you using Screencast.com embed code or embed code from another source? I don’t recognize the variables you mention in the follow up comment which leads me to believe the latter.
    Mike Curtis

  • http://Renegademarketerpro.com Kari Baxter

    I upload videos to screencast, then click “share” and copy the embed code from the screencast website. The one I’m trying to autoplay is an .mov file. Does that matter?

    I’m uploading it again as an mp4 so I’ll see if the code is different. If it’s not, I’ll record a jing and show you what I’m doing. ;)

    Thanks!

  • Frank

    Das ist gar nicht so kompliziert.. ich bekomme das sicher bei mir hin.. muss nur noch da zu kommen http://www.kreditkarten-informationen.de/

  • http://www.ringio.com Sam Aparicio

    One thing you fail to mention in the screencast is that, for the first frame image to be used, it needs to be uploaded to screencast.com. Briefly, it looks like you’re uploading the image to some comcast server, but the URL that you embed for the first image is a screencast.com one.

  • Mike Curtis, TechSmith

    Sam, you’re right, and thanks for bringing that up. I have a task to update that video–if nothing else, put a callout in there to make it more clear.

    Mike C

  • Scott James

    Nowadays videos are (seemingly) the way to advertise your company and/or product(s). With videos the targeted audience is enlarged because a lot more people are visual in nature. One of my friends owns his own mid sized Portland electrician company and is seeking to enlarge his customer base. I will definitely have to show him this website as we were speaking about this very topic not too long ago. Thanks!

  • Dave

    This was actually very helpful. I hate when you try and upload a youtube video, but you only get to choose from 3 different pictures for the first frame. I guess it prevents people from making fake videos, but I really wish Google would do something about it. Even Diablo 3 Skills has this kind of feature. Maybe in the near future Youtube will change for the better.

    Thanks Again For The Video!

  • Kendall

    Thanks for sharing how to modify the Screencast.com embed code in our web video production. I’ve been looking for something like this for awhile now. I’m getting ready to add a special “flashvar” to my video now!

  • http://www.tosharefile.com Poyan

    Finally we can change the first frame to a custom image!
    I’m surprised this wasn’t added earlier.

    However I sometimes get a black screen, why?

  • http://www.tosharefile.com Poyan

    I added the player to my site to share file but it doesn’t show up!
    Please help: http://www.tosharefile.com/vidplayer.php

    After I added the custom image it just stopped working

  • Sean

    When I use the embed code from my video (at Screencast) it loads on my WordPress page as two videos…one is the actual video and one is the first page image. When I open the video file in my Screencast library, it has two seperate files…one being the “first page image”. I haven’t been able to figure out how to embed just the video I made.

    Any ideas?

    Thanks, Sean

    Not sure if it makes any difference, but I used Jing to make the video of a powerpoint that I made.

  • Mike Curtis, TechSmith

    Poyan, Sean,
    Can you send me your embed code? I’ll take a look.
    m.curtis@techsmith.com

    Jing should work, and I’m confident we can figure out how to get that to work on WordPress. I’m not as familiar with trying to host your own controller, but let’s see what we can do.

    Mike Curtis

  • Aaron Turner

    Hi Mike!

    I agree with you to using autostart can be disconcerting for visitors but if we look to this from marketing viewpoint then the situation will be little bit other.

    Of course people does not like when video or sound starts automatically but the results of conversions are better at least based on my split tests.

    And changing the first frame image may improve the conversions too.

    Aaron Turner
    @Jealousy Blog

  • http://www.limesell.com Billy

    Okay. I think another comment above answered my question. I assume I have to use Screencast.com to host my image. I hope we can get other services compatible soon… Especially self-hosted WordPress sites like my life and money hack blog!

  • Anonymous

    This procedure is not working for the videos I have on Screencast. None have a .jpg in the html code. Is there some other option?
    I notice that your html code uses thumb= . Mine has thumbscale= . Are these the same starting points for the replacement of the URL to get the first frame picture?

  • Mike Curtis, TechSmith

    Anonymous,

    Is your video an MP4? (It needs to be for this to work.)
    If it is an MP4, and it’s not working, feel free to email me your embed code (m.curtis@techsmith.com) and I’ll take a look.

    Mike Curtis

  • http://www.prestigepropertyvideos.com.au Mitchell Lawrie

    I had no problem changing the first image on the video BUT your system obscures the image with all those lines, a huge button and washes out the colors.

    This is a complete deal killer for me. The first image should be clear and impactful… why create your default like that. Makes no sense.

    Please change asap.

    Mitch

  • http://twitter.com/Col_Davies Colin Davies

    The only embed code i have from screencast is code for an iframe. How do i add a chosen image as a splash image as the video above does not cover this ? Thanks

    • http://www.techsmith.com/ Daniel Foster

      Hi Colin, the embed code has changed to support devices without Flash. I don’t think there’s a way to change the first frame of the video via the embed code anymore. But it would be a good question to pose in our Q&A community to see if there are workarounds: http://feedback.techsmith.com/techsmith

  • http://twitter.com/mktarchitects Market Architects

    Are you working on a feature in Screencast to allow us to upload an image for the first frame? This really limits the uses we have for Screencast. We prefer it to other streaming platforms because of the easy upload from Camtasia, and it’s easy to use, but we have an animated logo we want to use to start our tutorials so the first frame is blank in Screencast.

  • jdcole.tv

    I tried this technique and it doesn’t work. I created a custom png, put a link to it in the embed code and nothing changes.

    FYI, I would prefer to use the screencast site rather than my website for a variety of reasons, but there are no instructions, in fact the help files are the worst I have seen in a while. Not a user friendly site and I am in the video business!

    • micurtis

      In this screenshot, the highlighted part of the code is the only part I changed to obtain a new frame. Make sure to keep the ‘thumb=’ http://www.screencast.com/t/4CrKFKJstle Is that what you’re doing too?

      If it’s not working, can you please open a ticket with support and include your embed code. They’ll take a look and see what’s amiss. You can open that ticket here: https://support.techsmith.com/home

      Sincerely,
      Mike Curtis

      • jdcole.tv

        Hi Mike, just saw this reply. I received other replies from tech support that said that I could modify the the first frame in Camtasia studio, but, of course, I have Camtasia for the MAC and can’t do it. What I did end up doing was to edit in a frame of video that I wanted to use as the first frame onto the first frame of the show. A pain, but it works.

        Next thing I am dealing with is using your embed code and having it play on an iphone or ipad and be sized correctly. What I have discovered is that the video does not resize itself for use on the iphone or ipad the way images do. Though it looks fine on a computer’s web browser and plays back on an ipad, the video stays sized for whatever code is in the embed code. My work around and it is a bit or work is to create a graphic sized correctly, add a start arrow to it in Photoshop and then embed a link to a play on a screencast page that I have customized for this use. A lot of work, but it does work. Any other suggestions?

        • micurtis

          Hi, that does sound like a lot of work. My experience is that the video fits the iPhone or iPad correctly. Can you send me a link to your video and maybe your embed code? I have some devices I can try it on.

          I’m curious and hopeful that you won’t have to use the Photoshop workaround. Just to confirm, you’re using Camtasia for Mac, going direct to Screencast.com?

          m.curtis@techsmith.com

          Mike Curtis