kgess-mirror/matrix.org
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix.org.git synced 2026-01-11 20:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Support start time and custom noscript texts in Youtube Embedding

Browse source 
Signed-off-by: MdSaifAliMolla <145194907+MdSaifAliMolla@users.noreply.github.com>
This commit is contained in:
MdSaifAliMolla 2025-10-07 15:17:03 +05:30 • committed by HarHarLinks
parent 3176e148a9
commit 3cd9ae8fcc
3 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CONTENT.md
View file

@ -84,6 +84,12 @@ In your markdown file, add this line to embed the YouTube player in a way that r
```jinja
{{ youtube_player(video_id="S1nBXjWWHoU") }}
```
You can also provide a start time using `start` and noscript-text using `noscript_text`, e.g.
```jinja
{{ youtube_player(video_id="Xje32fIIUyg",start="1240",noscript_text="Matrix Live S11E05 - Project Hydra") }}
```
which will start the video at 20:40 and add custom text for users with JS disabled.
### Adding a picture for the socials

17
static/js/components.js
View file

@ -106,14 +106,14 @@ class YoutubePlayer extends HTMLElement {
this.dispatchEvent(new CustomEvent("ytConsentChanged", { bubbles: true }));
});
const videoId = this.getAttribute("video-id")
const videoId = this.getAttribute("video-id");
const start = this.getAttribute("start");
const openInYoutube = document.createElement("a");
openInYoutube.textContent = "Open in Youtube";
openInYoutube.classList.add("button");
openInYoutube.setAttribute(
"href",
`https://youtube.com/watch?v=${videoId}`
);
let shareUrl = `https://youtube.com/watch?v=${videoId}`;
if (start) shareUrl += `&t=${start}s`;
openInYoutube.setAttribute("href", shareUrl);
openInYoutube.setAttribute("target", "_blank");
buttonGroup.appendChild(openInYoutube);
@ -131,8 +131,11 @@ class YoutubePlayer extends HTMLElement {
loadPlayer() {
const videoId = this.getAttribute("video-id")
const innerHTML = '<iframe src="https://www.youtube.com/embed/' + videoId + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
const videoId = this.getAttribute("video-id");
const start = this.getAttribute("start");
let embedUrl = `https://www.youtube.com/embed/${videoId}`;
if (start) embedUrl += `?start=${start}`;
const innerHTML = `<iframe src="${embedUrl}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
for (const child of this.shadowRoot.children) {
if (child.classList.contains("youtube_placeholder")) {

9
templates/shortcodes/youtube_player.html
View file

@ -1,2 +1,7 @@
<noscript>Today's Matrix Live: <a href="https://youtube.com/watch?v={{ video_id }}">https://youtube.com/watch?v={{ video_id }}</a></noscript>
<youtube-player video-id="{{ video_id }}"></youtube-player>
<noscript>
{% if noscript_text %}{{ noscript_text }}{% else %}Today's Matrix Live{% endif %}:
<a href="https://youtube.com/watch?v={{ video_id }}{% if start %}&t={{ start }}s{% endif %}">
https://youtube.com/watch?v={{ video_id }}{% if start %}&t={{ start }}s{% endif %}
</a>
</noscript>
<youtube-player video-id="{{ video_id }}"{% if start %} start="{{ start }}"{% endif %}></youtube-player>