Issue #4204 - Homepage video preview blocks

[MaxStalker]

Description

Video previews on home page are using SVGs at the moment. Text inside those is not outlined so it renders with a default serif font and is not centered in that block.
Here's how it looks currently:

And here's proposed solution:

Checklist

• Read and conforms to the contributor guidelines
• Read and conforms to the style guidelines
• Linter status: 100% pass
• Added relevant tests
• Tests pass and code coverage has not decreased
• Changes don't break existing behavior
• Commit message follows commit guidelines
• Code documentation
• Completed: Code review by core team and any requested changes

Affected core subsystem(s)

User interface

Refers/Fixes

This PR fixes #4204

Testing and Sign-off

Tested on local version of site using docker. Checked with different device screen width to ensure responsiveness:
https://www.loom.com/share/594acd535ed242de8d61544eddfac5e9

Contributor

• Read and followed the Contributor Guidelines
• Tested all changes locally
• Verified existing functionality
• Ran make test and everything passed!

Reviewer

• Affirm contributor guidelines have been followed and requested changes made
• CI tests and linting pass
• No conflicts (migrations, files, etc)
• Regression tested against staging or local deployment

Funder

• Validated requested changes were made to specification
• Bounty payout released to the contributor

[codecov]

Codecov Report

Merging #4205 into master will decrease coverage by 0.03%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4205      +/-   ##
==========================================
- Coverage   30.37%   30.33%   -0.04%     
==========================================
  Files         206      206              
  Lines       16404    16404              
  Branches     2156     2156              
==========================================
- Hits         4982     4976       -6     
- Misses      11242    11248       +6     
  Partials      180      180

Impacted Files	Coverage Δ
app/dashboard/embed.py	28.16% <0%> (-3.45%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e07c199...1c7f66b. Read the comment docs.

[thelostone-mc]

@MaxStalker hmm could we keep it as an id ?
Unless you see a reason where this would be reused again elsewhere

[MaxStalker]

In this particular case ids were used for styling - which is "no-no", since it creates more problems in the future. I've left ids there in case there are links elsewhere that reference them.
We can refactor "articles" to "home_articles" (or something similar) if you think this might introduce name collisions later.

[thelostone-mc]

@MaxStalker could you address my comments ? Otherwise LGTM

[MaxStalker]

@thelostone-mc I've updated the code. Can you give it another look?

[thelostone-mc]

thanks @MaxStalker ^^ and yup it looks good ^^