Have a look at the documentation Making all objects in a bucket publicly readable and Making individual objects publicly readable and check if your images available through directly links. I've tried and in works for me from different devices. If you have no problems with direct access though provided at Cloud UI links you should check configuration CMS system of your site. I found this example for WordPress that could be useful.
Then, I've tried to disable public access for test purposes and got an error:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>
Anonymous caller does not have storage.objects.get access to test-public-bucket-1/test-public-image-1.jpg.
</Details>
</Error>
Do you have any error messages when you're trying to reach your images and videos through directly links and via your website? If you have errors only while trying to view images and videos at website, you should check logs of web server that serve your website.
EDIT Have a look at the screenshots:

and

publicly accessible link you can get by clicking on the link icon after word Public
as you can find in the documentation:
Once shared publicly, a link icon appears for each object in the
public access column. You can click on this icon to get the URL for
the object.
use it instead of Link URL
that I noticed in your answer.
Meanwhile you use correct role Storage Object Viewer
at the screenshot for allUsers
and this role has permission storage.objects.get
as you can see in the documentation. So, no research needed.
Did you mistype Storage Object Viewer
role as Storage Object Reader
in your answer?