WordPress / WordPress/Learn

Feature request - Video Timestamps for Tutorials

Open
#919 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

[Type] Enhancement
Dominant language
PHP
Stars
333
Forks
127
Avg merge
1d 7h
Merged PRs (30d)
11

Description

Description

It would be nice if it was possible to include timestamps for WordPress.tv videos on Learn WordPress Tutorials.

WordPress.tv videos support a query variable at which allows the user to share the video at a specific timestamp

eg:

https://videopress.com/v/uJVeAMVC?at=120

will start the video at the 2-minute mark.

Adding the additional autoPlay query var will also automatically play the video

https://videopress.com/v/uJVeAMVC?at=120&autoPlay=1

It would be great if we could somehow accept the same (or a similar) query variable on the URL for Learn WordPress tutorials and pass it to the iframe that WordPress embeds into the page content for the tutorial.

eg:

https://learn.wordpress.org/tutorial/customizing-a-header-with-patterns/?at=120&autoPlay=1

This would allow content creators to create linkable timestamps as part of the tutorial's written portion, allowing visitors to jump to specific sections of the tutorial quickly.

Additional Information

Learn WordPress uses the content-workshop-single.php template part to render the video tutorial.

wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php

It used the WordPress Embed class and the default WordPress embed functionality to create the embeddable iframe that is rendered on the front end

Line 32

It implements the $wp_embed->autoembed( $post->video_url );

Where the $post->video_url is the URL the user adds in the WordPress.tv URL Sidebar setting on the post editor. In testing, it is possible to add the source video URL with the two query parameters to that setting area, and the video will jump to the specific time and autoplay.

learn wordpress org_wp-admin_post php_post=23230 action=edit

Requirements

  1. Update the Tutorial functionality on Learn WordPress to accept two additional URL/query parameters for the at and autoPlay values
  2. If either of these parameters is set, append them to the $post->video_url URL just before it's passed to the $wp_embed object's autoembed method.

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

Start in wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php, especially the $wp_embed->autoembed( $post->video_url ) call. Trace how the tutorial page receives URL query parameters, then verify that at and autoPlay are passed to the embedded video when present. Done means timestamped tutorial URLs jump to the requested time and optionally autoplay without those parameters breaking normal embeds.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.