Refactor the Events page header to replace the iframe element

[roslynwythe]

Overview

We need to refactor the HTML rendering the "Code for America" video within the header of the Events page, with the goal of using an embed or object element to present the video, in place of the iframe element.

Details

• To understand the history behind this issue and suggested approaches, see #6353

Action Items

• [x] Open your IDE to _includes\events-page\header-container-content.html
• [ ] Refactor the HTML, replacing the iframe element with an embed or object method, modifying the code and styling as needed so that the appearance and behavior of the page is unchanged at all screen sizes.
• [ ] If possible, perform local testing using docker on both Windows and Mac systems.

Resources/Instructions

Events webpage HTML for header of Events page

embed element

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>

object element

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>

[github-actions[bot]]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Feature, Size

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[github-actions[bot]]

Hi @Cloid, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[ExperimentsInHonesty]

@Cloid I will move this issue into the In Progress column. In the future, please move any issues you are assigned or self-assigned to that column. Also, please respond to the bot message above.

[Cloid]

i) I'll be available 7pm onwards, Monday-Friday. 10:30pm onwards on Saturday. ii) I'll aim for no later than Friday.

ill edit the time if my availability changes.

[Cloid]

Question:

I am having an issue where using either embed or object both replace the full-screen button for a redirect button that redirects to the original TED video link. If this the intended functionality then I am done.

Before Changes

After Changes

From what I understand customizing the native browser to replace the popout button with a fullscreen button isn't possible. You can either utilize a different video player object like video or make a custom video player as alternatives.

[github-actions[bot]]

@Cloid

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' 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, May 7, 2024 at 12:06 AM PST.}

[roslynwythe]

@Cloid Please clarify:

I am having an issue where using either embed or object both replace the full-screen button for a redirect button that redirects to the original TED video link. If this the intended functionality then I am done.

Does the screenshot depict a "redirect button"? Are you saying that the browser is redirected to the TED website? The intended functionality is that the video plays within the current Events webspage. It would be helpful if you could create a PR so that we can preview the changes.

[Cloid]

@roslynwythe Yes, it redirects the current page to the TED page with the associated video. I will do a PR to show changes.

[t-will-gillis]

@Cloid The PR has requested changes- please make them

[github-actions[bot]]

@Cloid

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, July 30, 2024 at 12:05 AM PST.}

[github-actions[bot]]

@Cloid

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, August 6, 2024 at 12:04 AM PST.}

[HackforLABot]

@Cloid

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, August 13, 2024 at 12:14 PM PST.}