*註記：影片無法播放的原因，可能是因為現在的程式碼，沒有useState以及useRef，這部分在下一篇文章會提到。

前言

Stories最重要的部分，就是影片啦~所以我們必須在project中使用javascript嵌入影片。完成後會變成這樣：

程式概念

今天最主要要用的，是javascript中的video。

使用，可以用來載入並播放影片，將影片的URL設置為src屬性，然後使用play()方法開始播放。同時它還提供了各種影片觀賞會用到的功能，例如播放、暫停、停止、音量控制、快進和倒帶等。可以通過JavaScript訪問這些控制選項，以實現自定義的播放控制。

實際將影片檔放上去後，網頁可能出現 Cannot play media. No decoders for requested formats: text/html, text/html的console，是因為影片的格式部分瀏覽器不支援，或是你的瀏覽器不允許各種網頁的影片播放，所以會這樣。

總而言之，將今天的步驟拆開來看就是：

• 找到一個video用來放上你的網頁
• 使用video來填滿昨天被色塊填滿的區域，這裡可以另外寫一個component，用來區分功能以及完成css的區分，這裡稱為VideoCard.js
• 使用VideoCard.css來完成你的介面編輯

完整code

// component/VideoCard.js
import React from 'react'
import './VideoCard.css'

const VideoCard = () => {
    return (
        <div className='VideoCard'>
            <video
                src="/video.mp4"
                className='videoCard_player'
                alt="Short Video app"
                loop />
        </div>
    )
}

export default VideoCard

// component/VideoCard.css
.videoCard {
    position: relative;
    background-color: white;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.videoCard_player {
    object-fit: fill;
    width: 100%;
    height: 100%;
}