Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Turn YouTube/Vimeo links into embed addresses in one core filter

Open
  • Is something wrong?
#184 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
backend, tooling

Research direction

Start with youtubeHelpers.js and safeUrlFilter.js to follow the existing parsing and filter registration patterns, then check renderEngine.js and both Arch widget templates and their update copies. Add the shared filter and tests for accepted hosts, ID shapes, and kept or dropped options; update the named documentation and regenerate the theme skill contract. Done means both widgets use it, the new filter cases pass, and existing videoEmbedWidget.test.js address cases still pass.

Written by the indexing model from the issue text.

Description

enhancement

Read YouTube/Vimeo links properly in one shared filter (Shorts, unlisted links, bad IDs).

Arch recognises video links in Liquid by substring (contains 'youtube.com/watch', 'vimeo.com/'…) and splits out the ID. Every branch now rebuilds the address on youtube.com/embed/ or player.vimeo.com/video/ and refuses an ID containing ., % or :, so a frame stays on the provider's embed path, but the ID's shape isn't checked (a wrong-length or misspelled ID gives a broken player, not none), the same ~40 lines are duplicated, youtube.com/shorts/ID and vimeo.com/ID/<hash> (unlisted share links) aren't recognised, and youtu.be/watch links drop options like t=. Core already parses YouTube links in extractVideoId (youtubeHelpers.js, used by the youtube setting type and {% youtube %}).

Add a filter, e.g. {{ url | video_embed_url }}: parse with URL, accept exact hosts (youtube.com, www./m.youtube.com, youtu.be, youtube-nocookie.com, vimeo.com, www.vimeo.com, player.vimeo.com), check the ID shape (YouTube 11 of [A-Za-z0-9_-], Vimeo digits), keep only allowed options (start time, Vimeo h), return https://www.youtube.com/embed/ID / https://player.vimeo.com/video/ID or "". Use it in Arch at the URL-parsing block of widgets/video-embed/widget.liquid (feeds the iframe src) and widgets/video-popup/widget.liquid (feeds data-video-url, which video-modal.js opens with autoplay=1), and in their updates/<version>/ copies. No other Arch template parses video links (profile-grid/team-highlight/social-icons only link to YouTube channels through safe_url).

Done when: Both widgets use the filter; filter tests cover each accepted form, a look-alike host, a bad ID and kept/dropped options; the existing videoEmbedWidget.test.js address cases still pass; theming docs, docs-website theme-dev pages and the theme-skill references list it, and the skill contract is regenerated.

Start: youtubeHelpers.js, safeUrlFilter.js (registration pattern), renderEngine.js, video-embed, video-popup, videoEmbedWidget.test.js, build-theme-skill-contract.js. Source: 2026-10-07 review of b9c9fc13.

Dominant language
JavaScript
Stars
162
Forks
6
Avg merge
12h 55m
Merged PRs (30d)
2

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from tsiger/widgetizer

All issues in tsiger/widgetizer

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.