How to Remove Grey First Screen YouTube Video

Topic

New Reply

For some reason, the video I’ve embedded via YouTube embed in WordPress.org, Gutenberg displays a grey screen with the play icon instead of the opening screen of the video. You can see it on our staging site: http://stage.mygoforthegreen.com/. I’m on Windows 7, SP1.

I would sure appreciate it if someone could tell me how to remove it so opening screen plays, as it used to.

Thanks for any help,

Linda

 

Reply | Quote

Replies

[dg1261]

IreneLinda,

The problem seems to be with a background image displayed with your YouTube embed code. Here’s the relevant snippet of code from your site (http://stage.mygoforthegreen.com/), which I’ve tried to reformat to make more readable, but the forum software is very idiosyncratic so it kind of botches it up:

Code:

<a class="lazy-load-youtube preview-lazyload preview-youtube youtube_button_image"
href="https://youtu.be/clQ1OFDSbdw?t=3" data-video-title="Selling is Simple ... Real Simple"
title="Play video &quot;Selling is Simple ... Real Simple&quot;"
height="164px" width="291px"
style="height: 164px; width: 291px;
background-image: url(&quot;https://i2.ytimg.com/vi/clQ1OFDSbdw/maxresdefault.jpg&quot;);
background-color: rgb(0, 0, 0);
background-position: center center;
background-repeat: no-repeat;">

In this code you’ll see the url of your YouTube video (“https://youtu.be/clQ1OFDSbdw“) and the url of a “background-image” (“https://i2.ytimg.com/vi/clQ1OFDSbdw/maxresdefault.jpg“). Follow the link to that image and you’ll see it’s exactly the image you’re trying to get rid of.

I haven’t seen this kind of code before (where an image is embedded *inside* an “a” tag),
but I guess it’s a WordPress way of displaying an image before the visitor clicks through to the underlying video. It’s not the usual code YouTube would generate for embedding videos, which relies on iframes.

Anyway, it looks like all you need to do is replace that image url to show a different image.

However, I’m not a WordPress programmer so can’t help further, but perhaps this will give you a clue where to search to fix the problem. I don’t know where the code on your WordPress page comes from (you? a WordPress editor? YouTube?) or who created that background image. Given that it’s inside a WordPress “a” tag, I would have assumed WordPress did it, but considering the ytimg.com url it looks like a YouTube thing. It’s even got the same video ID (clQ1OFDSbdw), so I’m guessing the latter.

Either way, hope this helps point you in the right direction. Maybe there’s an alternate YouTube snapshot you can use, or maybe you can create your own snapshot somewhere and edit the url in the WordPress code.

 

• This reply was modified 5 years, 1 month ago by dg1261.

Reply | Quote

Can you check YouYube to see all the sizes of the thumbnail are correct for the video? The URL for the video thumbnail points to the grey screen as if it doesn’t exist.

Reply | Quote

Hi and thanks so much for your help! Even looking through my code!

I’ve got 2 things to try, which I will do and post back results. I’ll start with the thumbnail; then, if that doesn’t work, will move on to the code fix.

Really appreciate your suggestions. This Lounge and its denizens continue to amaze and delight, even after all the years I’ve been on it.

Linda

Reply | Quote

Hmm. Weird. First, the thumbnail size doesn’t seem to be an issue. So, on to code …

I searched everywhere for the code you found. That does seem to be the right fix. In YT, the cover screen is the correct one, so the code is being mixed up somewhere along the line. Finally located it in “Inspect Element” (right clicked image to get there), but how do I replace that image url with the correct one?

I tried Style Editor in Inspect Element, but couldn’t find the correct url anywhere … not at all sure where exactly to look for it, to be honest.

I know you aren’t a WP programmer, but hope this edit code bit is more common knowledge (although not mine for sure!). If I can discover how to edit the url, I’ll just change it to the correct one.

Hopefully,

Linda

 

1 user thanked author for this post.

dg1261

Reply | Quote

Update: just after posting above, I received an email from a video plugin I was using to create a video gallery. He suggested trying it. I did … and it worked perfectly!

So the issue is corrected; however, I’m still curious to learn how to correct the URL for the background image so …

• if you do have some suggestions, I’d love to hear them
• only now there is no panic so don’t rush!

Linda

1 user thanked author for this post.

dg1261

Reply | Quote

[dg1261]

Well, the code on your webpage is very different now. It used to be that weird “image embedded inside the A tag” thing, but now it’s the more typical iframe, which is what I’m used to seeing with YouTube embeds.

The usual process to embed is to go to your YouTube video, click the “Share” link (just below the video frame), click “Embed”, and that will generate the html iframe code that you’ll copy and paste into your own webpage. Copy that code, open your WordPress page in editing mode, and paste the iframe code into the desired place in your WordPress code.

The code presently on your page is not exactly that, so whatever you did to fix it was not exactly as I’ve outlined above, but at least it’s in a more familiar iframe now.

As for displaying a custom thumbnail, I’m not aware if you can do that outside of YouTube. The old code you used to have seemed to suggest a way to use a thumbnail hosted on a third-party site, but I haven’t seen it done before.

My experience has been that the thumbnail is set by YouTube — and that’s the same thumbnail you’d see on your own webpage. Normally, when you first upload your video to YouTube it auto-generates three thumbnails from the video, and you choose which of those three you want YouTube to use publicly. If you’re one of the elite influencer types, I think you can create your own thumbnails locally and upload it for YouTube to use, but us mere mortals don’t have that option and have to settle for the three random thumbnails YouTube gives us.

As for how to find the relevant section amongst your WordPress code, I did a “view source” on your webpage and then searched for the YouTube ID of your video (clQ1OFDSbdw). That got two hits, both back-to-back in the same line in your WordPress code. That’s not how you’d edit it, but at least it shows you what you’re looking for and the code surrounding it. I presume you’d edit it inside the WordPress editor somewhere.

 

• This reply was modified 5 years, 1 month ago by dg1261.

Reply | Quote

Me again. I think I discovered the problem and it was my error.

What I was doing was selecting a YouTube block and that gave me the grey screen, I think. I just discovered that if I chose the “embeds” block first; then, chose “YouTube”, everything worked perfectly!

Thanks for being so patient and for offering practical and understandable suggestions.

I hope my stumbling with help some other Lounger with a similar issue … unless of course no one else makes such a simple mistake!!

Happily,

Linda

1 user thanked author for this post.

dg1261

Reply | Quote

dg1261, this is likely a repeat … I’d forgotten to sign in and wanted you to see this before “moderation” happened.

I think we were posting at the same time as I didn’t see your last post when I was writing mine. Guess it was the correct embedding that provided the iframe code that you expected?? I followed the steps you outlined to get the code for the video so that was good.

If you’re one of the elite influencer types, I think you can create your own thumbnails locally and upload it for YouTube to use, but us mere mortals don’t have that option and have to settle for the three random thumbnails YouTube gives us.

I am definitely NOT an influencer but I can  upload my own thumbnail and have done so each time. Check it out … I bet you can, too. I sure hope so because the choices YouTube usually provides are horrid!

Again, many thanks for your help and your detailed, educational replies.

Linda

 

2 users thanked author for this post.

dg1261, Elly

Reply | Quote

IreneLinda wrote:

I am definitely NOT an influencer but I can upload my own thumbnail and have done so each time. Check it out … I bet you can, too. I sure hope so because the choices YouTube usually provides are horrid!

Ah, now I remember — it’s for verified accounts! You need a verified account to upload custom thumbnails.

Years ago when I last checked, as I recall there were a number of hoops one had to jump through to get a verified account, so I never did. ISTR you had to verify your real name and stuff like that. I think that was probably back in the Google+ days … so maybe I’m getting Google+ mixed up with YouTube, but my impression was the process — and incentive — were kind of the same back then. Anyway, I never got a verified account.

Based on your comments, I took a fresh look, and now it’s nothing more than authenticating your login. Simple. After all these years, I’m now verified.

Thanks, Linda! I learned something new. Now I need to go back and fix some thumbnails on a few old videos.

 

 

Reply | Quote

Before this thread goes into permanent hibernation, now that IreneLinda has had her problem sorted out, maybe someone could answer this YouTube color-related question without having to start another dedicated thread on what probably has a simple and final “no” answer:

Is there a way of turning the now black background in YT to white, as it used to be?

I know that black is trendy, and that claims have been repeatedly made that black backgrounds cause less eye strain (in my experience is just the opposite, in the case of YT in particular, because one has to strain to read grey or light colored text that has been there from before, when the background was white, and now is a murkier grey on black, for example.)

I don’t hold much hope of learning that turning the background from black to white is even possible, but just in case, I ask…

Ex-Windows user (Win. 98, XP, 7); since mid-2017 using also macOS. Presently on Monterey 12.15 & sometimes running also Linux (Mint).

MacBook Pro circa mid-2015, 15" display, with 16GB 1600 GHz DDR3 RAM, 1 TB SSD, a Haswell architecture Intel CPU with 4 Cores and 8 Threads model i7-4870HQ @ 2.50GHz.
Intel Iris Pro GPU with Built-in Bus, VRAM 1.5 GB, Display 2880 x 1800 Retina, 24-Bit color.
macOS Monterey; browsers: Waterfox "Current", Vivaldi and (now and then) Chrome; security apps. Intego AV

Reply | Quote

OscarCP wrote:

Is there a way of turning the now black background in YT to white, as it used to be?

What platform are you using? Are you sure it’s not a setting in your app or browser? I’ve checked both my desktop and phone, and mine still use black text on white background.

 

Reply | Quote

I use the Mac now for going online and also Linux (in dual boot with Win 7 in my old PC, but have the Win 7 side of the PC permanently off the Web and have not used the Linux browsers to watch YT videos for a while, so I can only answer about the Mac.

I used to have an application there to turn white backgrounds to black or to grey with the idea of reducing eye-strain, but neither type of background worked out for me better than just the good old white one, so, after a while, I disabled the app.

I still get those all-black backgrounds in YT, even so (not in other sites, AskWoody, for example: still black letters on white background here). Same persistent all-black background, now days, in Amazon Prime’s “my stuff” videos’ pages, by the way, but there the white on black text is considerably easier to read than in YT, perhaps because nothing, when still on the reverse black on white, was written in grey letters?

Ex-Windows user (Win. 98, XP, 7); since mid-2017 using also macOS. Presently on Monterey 12.15 & sometimes running also Linux (Mint).

MacBook Pro circa mid-2015, 15" display, with 16GB 1600 GHz DDR3 RAM, 1 TB SSD, a Haswell architecture Intel CPU with 4 Cores and 8 Threads model i7-4870HQ @ 2.50GHz.
Intel Iris Pro GPU with Built-in Bus, VRAM 1.5 GB, Display 2880 x 1800 Retina, 24-Bit color.
macOS Monterey; browsers: Waterfox "Current", Vivaldi and (now and then) Chrome; security apps. Intego AV

Reply | Quote

Great news, dg1261. So glad you’re now truly a verified YouTuber! I’m  happy that I was actually able to help a Lounge MVP with a bit of information. It seems I’m always “taking” help here so I was very glad I could give some!!

Have fun creating personal thumbnails.

Linda

2 users thanked author for this post.

dg1261, Elly

Reply | Quote