Add tv ad-example styles to SCSS

[johnnyporkchops]

Summary (required)

• Remove CSS from any Wagtail html blocks using the TV ad example iframe pattern
• Add or edit classnames where necessary in html structure in Wagtail
• Add to _responsive-object.scss and include example html structure there

Resolves #3373

After deployment:
Make changes to these three live pages to reflect the simplified structure (right under 'How to test' below). Save as draft to be published after PR is deployed to production as part of a release(existing pages wont break upon deploying this, we just need to change them after):

• Make after release ticket to ensure the below items are completed after the release. See [AFTER RELEASE 06/23] Change tv ad examples html in Wagtail #3840

• Edit: https://fec-prod-proxy.app.cloud.gov/admin/pages/10811/edit/
  Live page: https://www.fec.gov/help-candidates-and-committees/making-disbursements-political-party/party-committee-independent-expenditure-tv-disclaimer-ad/

• Edit: https://fec-prod-proxy.app.cloud.gov/admin/pages/10616//edit/
  Live page: https://www.fec.gov/help-candidates-and-committees/making-disbursements/advertising/candidate-television-ad-example/

• There is a new page being created by @djgarr, but will likely not be published before release and he has been updated on the new structure for making these items in html blocks.

Impacted areas of the application

modified: fec/static/scss/components/_responsive-object.scss
Live Wagtail pages using the TV ad example pattern. (listed above)

Screenshots

How to test

• checkout and run: feature/css-styles-tv-examples
• npm run-build sass
• Edit http://127.0.0.1:8000/admin/pages/10811/edit/
• Replace the html block with just this:

<div class="video-frame">
   <div class="iframe-container">
    <iframe src="https://www.youtube.com/embed/REOm_O2VJcc" rel=0 frameborder="0" allowfullscreen></iframe>
   </div>
</div>

• Preview or publish and confirm that it still renders just like the live version:
  https://www.fec.gov/help-candidates-and-committees/making-disbursements/advertising/candidate-television-ad-example/
• Test responsivity of the patterm

NOTE: If you get error on previewing on your local dev servr, you may need to change Wagtail >Settings > Sites > Site > Hostname to localhost. Or you can just publish locally and test that way.

---

[johnnyporkchops]

For third checklist item above, the new TV example page will likely not go live before this PR is merged, so we only need to change the two pages listed above.

[rfultz]

Have we checked this in IE? Last I checked it wanted videos to have heights that were actual numbers and not just percentages, but that's been a while

[johnnyporkchops]

@rfultz , Tested and this works in IE. I am basing it loosely on this technique. On a side note, Wagtail used to add to this CSS to draftail video embed as well, but I think I read they removed it and leave it up to us so do in current versions.
https://alistapart.com/article/creating-intrinsic-ratios-for-video/#section4

[rfultz]

The linter will want two-space indents and exactly one blank line at the bottom.

Should we use quotes inside the url()? I go back & forth

[johnnyporkchops]

I go back and forth too. We should decide on one or the other

[rfultz]

Looks good! I'd like more diversity with the hand in the photo, but that's a different ticket. Just the linting/formatting

[johnnyporkchops]

@rfultz, I made the spacing changes. If you are good with it, you can merge

[codecov-commenter]

Codecov Report

Merging #3812 into develop will decrease coverage by 0.01%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop    #3812      +/-   ##
===========================================
- Coverage    75.27%   75.25%   -0.02%     
===========================================
  Files          121      121              
  Lines         7352     7352              
  Branches       592      592              
===========================================
- Hits          5534     5533       -1     
- Misses        1818     1819       +1     

Impacted Files	Coverage Δ
fec/fec/static/js/modules/calendar.js	91.91% <0.00%> (-0.74%)	⬇️

---

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 54182e4...4378d98. Read the comment docs.