a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
export function YouTube({ src, caption }: { src: string; caption?: string }) {
|
|
// Extracts youtube ID from any format, eg:
|
|
// https://youtu.be/tHQW_K2pEgI
|
|
// https://www.youtube.com/watch?v=tHQW_K2pEgI
|
|
// https://youtu.be/tHQW_K2pEgI?si=sKtDDhygzBezfean
|
|
// https://www.youtube.com/watch?v=tHQW_K2pEgI&si=sKtDDhygzBezfean
|
|
const id = ((src.split('/').pop() ?? src).split('v=').pop() ?? src)
|
|
.split('&si=')[0]
|
|
.split('?si=')[0]
|
|
|
|
return (
|
|
<span className="block mb-5">
|
|
<span className="block bg-zinc-100 dark:bg-zinc-800 py-1 md:rounded-2xl -mx-5 md:mx-0 md:px-1">
|
|
<iframe
|
|
src={`https://www.youtube.com/embed/${id}?rel=0`}
|
|
title={caption}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowFullScreen
|
|
className="w-full aspect-video md:rounded-xl overflow-hidden !my-0 shadow"
|
|
></iframe>
|
|
</span>
|
|
{caption && <span className="block text-xs text-zinc-500 mt-3 text-center">{caption}</span>}
|
|
</span>
|
|
)
|
|
}
|