18

I am trying to take a screenshot of a YouTube video in fullscreen.

When I pause the video and wait a moment, only the bottom UI bar (play/pause/seek) disappears. The top UI bar (Like/Share/More Info) stays there.

So when I press PrintScreen on the keyboard, the screenshot is polluted by this top UI bar. Is there any way to remove it while the video is on pause?

  • Why not just put a black box over the UI bar in the saved screen shot image? – Ƭᴇcʜιᴇ007 Sep 7 '12 at 21:06
  • 2
    @techie007 I wanted to find a way to get the screenshot without losing part of the image... – SemMike Sep 8 '12 at 14:02
29

Bookmarklet to Hide All YouTube Video Progress/Toolbars with one click

(makes it easy to get a clean full-screen HD screenshot)


To ADD the Bookmarklet:

  1. highlight the the text in the next box

    javascript:(function(){var goaway=".ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();

  2. drag the highlighted text to your browser bookmarks toolbar

  3. rename the newly created bookmark if desired

To USE the Bookmarklet (to remove progress/toolbars):

  1. load any YouTube video
  2. click the bookmark
  3. All progress/toolbars are gone
    (EVEN WHEN PAUSING VIDEO)

To RESTORE all toolbars:

  • refresh the page

To CONTROL VIDEO (without buttons toolbar):

  • Full-screen: double-click the video
  • Rewind/Fast Forward: left/right arrow keys
| improve this answer | |
  • 1
    This is the correct answer. Worked perfectly. – Joshua Dance May 12 '16 at 22:11
  • 5
    You can add .ytp-gradient-top and .ytp-gradient-bottom classes to the list to hide the dark gradient as well. – Sumit Apr 1 '17 at 9:53
  • 1
    anyone knows what this one does: if ("\v" == "v") ? – JinSnow Sep 29 '17 at 14:20
  • @JinSnow Apparently it's a short hack to test if browser is Internet Explorer or not. source: ajaxian.com/archives/ievv – Adam Toth Jul 6 '18 at 0:04
  • @Sumit I suggested edit to add gradients in the script so people can just copy paste and use the whole thing. Waiting for peer review. – hsandt Dec 16 '19 at 23:04
7

The only way I could find was simply to download the video from Youtube, play it in any media player and take a screenshot from there (either with the media player's screenshot option, or PrtScn on the keyboard).

| improve this answer | |
  • 1
    Just another way DRM hurts honest people. – Cosine Sep 15 '16 at 13:20
7

How about not pausing and hitting PrtScn when the timing is right. If that is not an option Windows 7 has a tool called Snipping Tool that will let you chop off the top UI bar, of course at the cost of losing that much video area.

| improve this answer | |
  • Thanks but it destroys part of the image, I could just discard that part with Paint but the point was to get the whole image... – SemMike Sep 8 '12 at 14:03
  • 2
    Timing it like this is possible but super frustrating. :) – Joshua Dance May 12 '16 at 22:42
5

You can use http://www.youtubescreenshot.com to get a screen shot from custom position

| improve this answer | |
  • 1
    A similar site would be ytscreen.com which also takes various screenshots from a youtube video. – zeddex Dec 2 '15 at 20:37
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – nKn Jan 2 '16 at 13:34
  • 3
    @nKn This is not a regular link only answer but a software/website recommendation – pun Jan 2 '16 at 15:01
  • @nKn the link is the answer. He could write about what it does, but if the link goes away so does the value of the answer. – Joshua Dance May 12 '16 at 22:42
5

As an extension of JumboDS64's extension of oLinkWebDevelopment's answer, I noticed that there is still a gradient at the top of the video, which can be removed with the name "ytp-gradient-top" for the complete, clean look. The updated command is:

javascript:(function(){var goaway=".ytp-gradient-bottom,.ytp-gradient-top,.ytp-chrome-top,
.ytp-chrome-bottom{display:none;}";
if("\v"=="v"){document.createStyleSheet().cssText=goaway}
else{var tag=document.createElement("style");
tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);
tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();
| improve this answer | |
2

Type these into Javascript Console:

document.getElementsByClassName("ytp-chrome-bottom")[0].style.display="none"; 

for bottom GUI;

document.getElementsByClassName("ytp-gradient-bottom")[0].style.display="none";

for bottom gradient;

document.getElementsByClassName("ytp-chrome-top")[0].style.display="none"; 

for top GUI;

document.getElementsByClassName("ytp-gradient-top")[0].style.display="none";

for top gradient;

document.getElementsByClassName("branding-img-container")[0].style.display="none";document.getElementsByClassName("branding-context-container-outer")[0].style.display="none";

for branding;

Here is the plain code:

document.getElementsByClassName("ytp-chrome-bottom")[0].style.display="none";
document.getElementsByClassName("ytp-gradient-bottom")[0].style.display="none";
document.getElementsByClassName("ytp-chrome-top")[0].style.display="none";
document.getElementsByClassName("ytp-gradient-top")[0].style.display="none";
document.getElementsByClassName("branding-img-container")[0].style.display="none";
document.getElementsByClassName("branding-context-container-outer")[0].style.display="none";

Note, you will have to navigate via keyboard controlls, but that isn't too hard (left arrow, right arrow, space)

| improve this answer | |
1

As an extension of oLinkWebDevelopment's answer, at the begining, "ytp-gradient-bottom" should also be deleted (that being the black gradient at the bottom of the video which is part of the pause toolbar). With that added, the command is:

(function(){var goaway=".ytp-gradient-bottom,.ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();
| improve this answer | |
1

A very simple solution which is working on Firefox. This will take a full screenshot of the YouTube video at the current time.

No need for downloading anything or adding anything to your browser.

  1. The first right click will open the internal YouTube menu, leave that.
  2. Right click again on the video so the browser menu will be shown
  3. Click on "Save Snapshot As..." from there.

As shown below: enter image description here

BTW, You can move frame by frame with , and . keys when the video is paused.

| improve this answer | |
0

I personaly use Lightshot

This tool is usefull in so many ways and when you need a screenshot of a video you can just wait for the right moment, then press the Prt Sc button and then you can just adjust your image then save it in a folder, copy to your clipboard or even google search it.

It also comes with a basic editing tools like, pencil, marker, change of colors, adding text and some sharing capavility

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.