hedgedoc/src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx
Tilman Vatteroth ec77e672f6
Refactor replacers and line id mapping
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2021-10-25 00:13:40 +02:00

26 lines
922 B
TypeScript

/*
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import type { IdProps } from '../custom-tag-with-id-component-replacer'
export const YouTubeFrame: React.FC<IdProps> = ({ id }) => {
return (
<OneClickEmbedding
containerClassName={'embed-responsive embed-responsive-16by9'}
previewContainerClassName={'embed-responsive-item'}
hoverIcon={'youtube-play'}
loadingImageUrl={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}>
<iframe
className='embed-responsive-item'
title={`youtube video of ${id}`}
src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
/>
</OneClickEmbedding>
)
}