如何在 React 页面嵌入 youtube 影片

使用 iframe 是最直接的方法，在 youtube 影片点选右键，选「复制嵌入程式码」，可以得到像下面的这段程式码

<iframe width="640" height="360" src="https://www.youtube.com/embed/daVASrwlU9c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

把这段程式码贴进 React 可以运作，但是没有 RWD 的效果，google 了一下找到解法，不多废话，直接附程式码

CSS

RwdYoutube.module.css

.videobox {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.videobox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JS 元件

RwdYoutube.js

import React from 'react';
import styles from './RwdYoutube.module.css';

export default function RwdYoutube({ src }) {
    return (
        <div className={styles.videobox}>
            <iframe frameBorder="0" src={src} allowFullScreen="true" />
        </div>
    )
}

然后直接使用就可以了...

import RwdYoutube from './RwdYoutube'

<RwdYoutube
    src="https://www.youtube.com/embed/daVASrwlU9c"
/>

问题解决

版权声明

，转载请注明出处
本文键接: https://tech.havocfuture.tw/zh-hans/blog/react-embeded-youtube

這是 google 廣告

這是 google 廣告