diff --git a/shared/editor/embeds/YouTube.tsx b/shared/editor/embeds/YouTube.tsx index 00a8fdad2..96ac7415a 100644 --- a/shared/editor/embeds/YouTube.tsx +++ b/shared/editor/embeds/YouTube.tsx @@ -5,24 +5,30 @@ import { EmbedProps as Props } from "."; function YouTube({ matches, ...props }: Props) { const videoId = matches[1]; - let start; + let src; try { const url = new URL(props.attrs.href); const searchParams = new URLSearchParams(url.search); - start = searchParams.get("t")?.replace(/s$/, ""); + const start = searchParams.get("t")?.replace(/s$/, ""); + + // Youtube returns the url in a html encoded format where + // '&' is replaced by '&'. So we also check if the search params + // contain html encoded query params. + const clip = ( + searchParams.get("clip") || searchParams.get("amp;clip") + )?.replace(/s$/, ""); + const clipt = ( + searchParams.get("clipt") || searchParams.get("amp;clipt") + )?.replace(/s$/, ""); + + src = `https://www.youtube.com/embed/${videoId}?modestbranding=1${ + start ? `&start=${start}` : "" + }${clip ? `&clip=${clip}` : ""}${clipt ? `&clipt=${clipt}` : ""}`; } catch (_e) { // noop } - return ( - - ); + return ; } export default YouTube;