Refactor HTML displaying video without iframe

[roslynwythe]

Overview

We aim to find a new method for embedding the "Code for America" video within the header of the Events page, in order to resolve the problem some users have a loading the video due to their browsers' privacy (cross-site tracking prevention) settings.

Details

• Some MacOS users report seeing a "loading circle" spin for a few minutes before stopping.
• It appears that the problem may be due to the fact that the video clip is rendered within an iframe element, and browser privacy (tracking prevention) features may block loading content from tracking resources in iframe elements.
• See ER: Events page continuously loading video #4370 (comment) for more information

Action Items

• To view the relevant code, open your IDE to _includes\events-page\header-container-content.html
• Research to determine if there is an alternative method of embedding the video, without the use of an iframe, that can maintain the same behavior and appearance.
• Report findings in a comment then move the issue to "Questions/In Review" and apply the label "ready for dev lead"

Resources/Instructions

HTML for header of Events page

• This issue was created from ER: Events page continuously loading video #4370

[heejung-hong]

1. Availability: Weekdays after 6pm
2. ETA: 3/15

[heejung-hong]

When clicking on the share button from the Ted Talk website, the mp4 video file (325.6 MB) and mp3 audio file (7.5 MB) are available for download.

If we save the actual files to the assets folder and use the video element, the iframe may be eliminated.

For video files:
https://www.w3schools.com/html/html5_video.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

For audio files:
https://www.w3schools.com/html/html5_audio.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

The share button, also provides the link and the code to embed the video:
https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government?utm_campaign=tedspread&utm_medium=referral&utm_source=tedcomshare

<div style="max-width:854px"><div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://embed.ted.com/talks/lang/en/jennifer_pahlka_coding_a_better_government" width="854" height="480" style="position:absolute;left:0;top:0;width:100%;height:100%" frameborder="0" scrolling="no" allowfullscreen></iframe></div></div>

[ExperimentsInHonesty]

@heejung-hong We don't have explicit permission to upload the video to our repository, and given that they have a copyright notice on their site, we can assume they are fine with people downloading or embeding but not anything else.

Are any of the strategies on this page an option https://www.geeksforgeeks.org/alternative-to-iframes-in-html5/

I am moving this back to in progress. When you have a response, please leave another comment and put it in the questions column with a ready for dev lead label.

[github-actions]

@heejung-hong

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 26, 2024 at 12:06 AM PST.}

[heejung-hong]

Thank you for the information @ExperimentsInHonesty,

I’ve looked at the other options and the embed and object elements work with the link to view the video. I have tested both on Chrome, Firefox, and Safari, in both mobile and tablet format, and did not encounter any issues in playing the video linked.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

<div>
  <embed class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government" width="854" height="480" frameborder="0" scrolling="no" allowfullscreen>
</div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

<div>
  <object class="video-size" data="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government" width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></object>
</div>

Unfortunately the video element didn’t work with the link.

<div>
  <video class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government" width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></video>
</div>

I haven’t had any issues playing the video from my machine on all three browsers with the iframe element. In the mdn docs, it is indicated that frameborder and scrolling attributes are deprecated and should be removed from existing content.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

[roslynwythe]

@heejung-hong Thank you for the information and testing of the embed and object elements.

• Did the use of those elements change appearance or behavior of the video or the page?
• Can you advise which element embed or object would be preferable?

[heejung-hong]

Hi @roslynwythe,

I checked out the embed and object elements on both Chrome, Firefox, and Safari browsers and there were no visible changes in Desktop and Mobile view.

I would advise further testing for iframe, embed, and object elements on a Windows machine since my tests were only on Mac.

[roslynwythe]

Thank you @heejung-hong for your analysis. We will be following up with a new issue to update the Events page based on your findings.