Hey there,
The following CSS should work well for that:
.blog .featured-image,
.archive .featured-image,
.search .featured-image {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 75%;
}
.blog .featured-image img,
.archive .featured-image img,
.search .featured-image img {
position: absolute;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.
This is going to center and crop those images to the same aspect ratio the videos use without the black bars included.
Worked like a charm! Thanks so much. 🙏
You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.
Hi Ben, just another quick question. Is there any way to make YouTube URL embeds not resize twice? In every post page, the video starts smaller, and then gets larger.
https://worldnewsindex.com/video-news/nasa-plans-to-crash-the-international-space-station-into-earth/2022/02/02/
I’ve tested on other themes and it doesn’t do this by default.
Thanks for the help!
Mission News has a feature that resizes the video so that it fits into any sized space. Normally, this happens without an obvious delay of any kind, so what I think is happening is that the script is being deferred.
It looks like Cloudflare’s rocket loader is enabled so that could be it, but it might be the effect of another performance plugin on the site as well. Check for anything that “defers” Javascript files.
If you can whitelist a file to prevent it from being deferred, here is the URL of the Mission News Javascript file:
https://worldnewsindex.com/wp-content/themes/mission-news/js/build/production.min.js
It is only 6kb, so it won’t slow your site down by loading right away.
That makes sense! Tested it and that was the issue, so the videos are loading without that problem now. Thanks a lot! Your theme is very fast on the GTMetrix scores even without Rocket Loader. 🚀
Great, glad that worked out!
Just let me know if anything else comes up 🙂
