如何在 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/blog/react-embeded-youtube

這是 google 廣告

這是 google 廣告