Gutenberg Video Submission Solution In Articles?
Can anyone please help? It has been driving me absolutely insane for quite some time now that when you add any videos in your articles via Gutenberg then you get an ugly black line above the video and at the bottom of the video when the background of the video or video thumbnail is a white colour.
The only solution I could find for this is to make sure my video thumbnails uploaded to YouTube does not have a white background to avoid these black lines.
Although I mostly use my own created videos in my articles I do sometimes embed the videos of other creators in my articles and here I have no control over the thumbnail and is a problem when the thumbnail background happens to be white. See the issue in the screenshot below. The two black lines. One at the top and one at the bottom.
With each new WordPress update I am thinking that surely this issue will be addressed, but they just never do. I have not seen this issue pop up when making use of any other WordPress builder.
Does anyone have a solution for this? If so, it will be much appreciated.
Ps. I was going to put this under the "ask a question" section, but there is no option to upload an image there. Also the thumbnail may be a bit deceptive in appearance. When you click so the video starts playing the video fills in the full area where the black lines can be seen - so in short the black lines will no longer be there when the video starts playing. It fills in the whole area as can be seen below.
Here is an image of the html code I tried too and still getting the black lines. So no matter whether using html or using the YouTube block in Gutenberg to add the YouTube url - same result.
Many thanks for your help in advance.
Schalk
Recent Comments
26
do you add your videos via the video block or the cutsom html block...
with the cutsom html you get to customize the appearance a lot more so you may be able to get rid of the black lines...
and you could save this as a reusable block ....
just change the video url from youtube or other platform..
Thanks, I will try. I tried pretty much everything. I added it via their 'YouTube" block feature and I tried html too. But I will try html one more time to see. I tried playing around with column heights etc. too.
Thanks I just posted an image of the html code in the article. I tried the html code now - same result. Same two black lines. One at top and one at bottom.
If the html code is a bit small then you can possibly zoom into it or if it is too small please let me know and I can see if I can zoom into it when taking a screenshot so it is easier to read/see. Many thanks!
copying the code into a html block i don't see the black lines at the top and bottom -is it down to your screen format....
with the width set to 100% i get bars to the left and right but it then scales to the width of the block
is this one of your videos Schalk...
too fast for me - i slow it down to 0.5x to see what is going on...
Is the image you submitted a screenshot when you are actually playing the video or is this the embedded thumbnail of the video before you press play?
I don't have an issue when the video plays with how it displays. I have an issue with how the video thumbnail displays before the visitor hits play.
No, it is not my video. It is the video of the software company whose product I am reviewing.
that was as it was playing.....
thumbnail displayed is different to yours ...
so it must be the format of the thumbnail....
I am super confused. Why does your thumbnail that displays looks completely different to mine? As I of course have no control over how the thumbnail will display?
Is this what the thumbnail looks like for you when you first visit the page without pressing play?
I realised now my thumbnail looks exactly like yours in the backend but not on the front end. I bet it got to do with how the video is being lazy loaded.
Yes I now checked. Now that I am no longer lazy loading it I see exactly what it is you are seeing. So got to do with the plugin that is doing the video lazy load. Problem sort of solved now. Thanks! As at least I now know where to look for the problem.
at least you have somewhere to look at ...which lazy load do you use...
just tried it with this code and you can add your own image for the thumbnail - you will need to add a play arrow to the thumbnail image...
but seems to work for me...
got from here...
https://stackoverflow.com/questions/7199624/youtube-embedded-video-set-different-thumbnail
Many thanks. Interesting. I use a multi-faceted performance plugin called Perfmatters which also includes the lazy loading
The only question that now remains. Even if I add my own thumbnail when lazy loading it will probs still present the same issue due to the problem seemingly to be with the plugin performing the lazy load rather than the thumbnail itself. Unless of course the thumbnail I add don't have a white background. Nice to have an extra option to explore and also nice to know if thumbnails are not presentable.
i don't know - if you add your own thumbnail it may see it as an image...
the only way to see is to try it....
i know of perfmatters and know they don't have a free version...
i know a3 lazy load doesn't change anything...
i take it you have gone through their help
https://perfmatters.io/docs/lazy-load-wordpress/#youtube-preview-thumbnails
and tried the code...
if you don't use the thumbnail ( option in perfmatters) the above code will work with a thumbnail and image....just make sure you make the image the right size...and add the play button...
Hi, many thanks. I am going to double check I have that preview thumbnail feature ticked in perfmatters :)
I just checked. I have the Youtube preview thumbnails switched on in perfmatters. Mmmm another thing to explore but it may just be that exactly this that is supposed to be a good feature actually causing the issue, as this function is on top of the video lazy load option.
Thank you so much for all of your help. It was really incredibly helpful trouble shooting and got me thinking in the right direction. I can now confirm that it is indeed the preview thumbnails function that is causing this issue and it seems to be only if the background of thumbnail is a light colour like white.
However I still have the option to lazy load videos in perfmatters which is great. I can see esentially what is happening with the preview thumbnails and that it will boost performance even more. But as it is not working perfectly I have decided to rather disable it to provide a better user experience. As long as it is lazy loaded, it should be fine. Many thanks for this once again :)
See more comments
You got your answer correctly from feigner.