Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor the Events page header to replace the iframe element #6749

Open
1 of 3 tasks
roslynwythe opened this issue Apr 25, 2024 · 9 comments · May be fixed by #6915
Open
1 of 3 tasks

Refactor the Events page header to replace the iframe element #6749

roslynwythe opened this issue Apr 25, 2024 · 9 comments · May be fixed by #6915
Assignees
@Cloid
Labels
Complexity: Medium Feature: Refactor HTML P-Feature: Events https://www.hackforla.org/events/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours
Projects
Project Board
Milestone
w. Accessibility

Comments

@roslynwythe
Copy link
Member

roslynwythe commented Apr 25, 2024 •
edited by Cloid
Loading

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

Action Items

  • 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>

@roslynwythe roslynwythe added Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing labels Apr 25, 2024
@HackforLABot HackforLABot added this to New Issue Approval in Project Board Apr 25, 2024
@github-actions GitHub Actions

This comment has been minimized.

Sign in to view
@roslynwythe roslynwythe added Complexity: Medium role: front end Tasks for front end developers P-Feature: Events https://www.hackforla.org/events/ size: 1pt Can be done in 4-6 hours Ready for Prioritization and removed Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing labels Apr 25, 2024
@roslynwythe roslynwythe changed the title Remove iframe from Events page Remove video from iframe on the Events page Apr 25, 2024
@roslynwythe roslynwythe changed the title Remove video from iframe on the Events page Remove iframe on the Events page Apr 25, 2024
@roslynwythe roslynwythe changed the title Remove iframe on the Events page Refactor the Events page header to replace the iframe element Apr 25, 2024
@ExperimentsInHonesty ExperimentsInHonesty added this to the w. Accessibility milestone Apr 26, 2024
@ExperimentsInHonesty ExperimentsInHonesty moved this from New Issue Approval to Prioritized backlog in Project Board Apr 26, 2024
@github-actions GitHub Actions

This comment has been minimized.

Sign in to view
@ExperimentsInHonesty
Copy link
Member

@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.

@ExperimentsInHonesty ExperimentsInHonesty moved this from Prioritized backlog to In progress (actively working) in Project Board Apr 28, 2024
@Cloid
Copy link
Member

Cloid commented Apr 29, 2024

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
Copy link
Member

Cloid commented May 1, 2024

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 image
After Changes image

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.

@Cloid Cloid added the Status: Help Wanted Internal assistance is required to make progress label May 1, 2024
@github-actions github-actions bot added the To Update ! No update has been provided label May 10, 2024
@github-actions GitHub Actions

This comment has been minimized.

Sign in to view
@Cloid Cloid moved this from In progress (actively working) to Questions / In Review in Project Board May 15, 2024
@roslynwythe
Copy link
Member Author

roslynwythe commented May 29, 2024 •
edited
Loading

@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
Copy link
Member

Cloid commented May 30, 2024

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

@Cloid Cloid linked a pull request May 30, 2024 that will close this issue
Open
@ExperimentsInHonesty ExperimentsInHonesty added ready for merge team needs a senior review either to do some re writing or to approve it for ready for prioritization and removed To Update ! No update has been provided Status: Help Wanted Internal assistance is required to make progress labels Jun 8, 2024
@ExperimentsInHonesty ExperimentsInHonesty mentioned this issue Jun 8, 2024
Open
10 tasks
@t-will-gillis
Copy link
Member

@Cloid The PR has requested changes- please make them

@t-will-gillis t-will-gillis removed the ready for merge team needs a senior review either to do some re writing or to approve it for ready for prioritization label Jun 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Cloid Cloid

Labels
Complexity: Medium Feature: Refactor HTML P-Feature: Events https://www.hackforla.org/events/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours
Projects
HfLA Website: Project Board
Status: In progress (actively working)
Project Board
  
Questions / In Review
Milestone
w. Accessibility
Development

Successfully merging a pull request may close this issue.

Changed iframe object to object video player Cloid/hackforla_website
4 participants
@roslynwythe @Cloid @ExperimentsInHonesty @t-will-gillis