Clip 元素使您能夠將託管在 YouTube 或 Vimeo 等第三方平台上的影片整合到您網站上的任何位置。
在本課程中,您將學到:
- 新增影片的步驟
- 如何調整視訊配置
- 建立影片比例
- 在您的網站上新增剪輯的替代方法
- 使用個人化代碼合併視頻
整合剪輯

有兩種方法可以將剪輯元素插入您的網站:
- 揭開面紗 插入面板 並拖曳一個 影片 元素到您的 Webflow 畫布上
- 鍵入 命令 + 乙 (在 Mac 上)或 控制 + 乙 (在 Windows 上)打開 快速尋找 並尋求 影片 成分
調整剪輯配置
在畫布上找到剪輯元素後,您可以修改 夾子配置 輸入 URL 和標題。若要快速存取剪輯設定:
- 按兩下 夾子 元素
- 選擇 夾子 元素並導航到 元素設定面板 (D)
貼上影片的 URL,根據需要添加標題,然後按 進入/返回。剪輯的預覽影像將顯示在剪輯元素中。

支援的剪輯來源
- Youtube (考慮使用 YouTube 影片元素來增強 YouTube 影片控制)
- 維梅奧
- 每日動態
- 眾籌 (只需貼上主要活動 URL,Webflow 將獲取主要活動剪輯)
- 泰德 (支援多種語言)
- 紫藤屬
- 優流
- 現場直播
- 抽搐
- 馬鈴薯網
- 葫蘆
- 萌芽視頻
透過我們的通知我們 願望清單 如果您的剪輯來源非常規,我們將努力將其納入其中!
至關重要的: 目前,不支援將視訊檔案提交到“資源”面板以在剪輯元素中使用。不過,您可以將影片上傳為靜音背景剪輯。
配置剪輯尺寸
Clip 元素一致地鏡像其包圍容器的尺寸(例如,當放置在 div 區塊內時,它繼承該 div 區塊的整個寬度)。如果您希望為剪輯指定不同的寬度和高度,請產生一個唯一的 div 區塊。從 中拖出一個 div 區塊 插入面板 並設定div塊的寬度和高度參數。將您的剪輯與此個性化 div 區塊關聯後,它將遵循該尺寸。

在您的網站上整合剪輯的其他方法
您也可以使用其他元件在您的網站上插入剪輯,例如:
- YouTube 剪輯
- 背景剪輯
- 燈箱
- 富文本
- 個性化程式碼嵌入
YouTube 剪輯元素
這 YouTube 剪輯 元素使您能夠嵌套來自 YouTube URL 的剪輯。此元素提供 YouTube 嵌入功能中可用的所有示範選項,例如顯示頻道中的相關影片、指定特定開始時間、顯示或隱藏影片控制等。了解有關 YouTube 剪輯元素的更多資訊。

動態影片部分
這 動態影片 部分可讓您合併沒有聲音的移動視覺效果。與僅容納 YouTube 和 Vimeo URL 的影片組件不同,動態影片部分可以處理您上傳的任何影片檔案。此外,動態視訊部分還包括一個用於播放/暫停功能的內建切換開關,使網站訪客能夠控制視訊背景。獲得有關動態視訊功能的更多見解。

彈出模態視訊元素
這 彈出模態視頻 元素允許網站訪客在彈出模型中啟動影片剪輯。與影片片段類似,彈出模式支援 YouTube 和 Vimeo URL。深入研究彈出模式視訊元素。

文字樣式元素和內容豐富的文字字段
文字樣式部分還允許您插入影片內容。當用於從 CMS 集合中的富文本欄位取得資料時,這會變得更加有效。

或者,一個 影片 部分可用於動態地從集合的視訊組件中取得資料。了解有關集合影片組件的更多資訊。
透過自訂程式碼嵌入添加視頻
您還可以使用以下命令集成 HTML 視頻 嵌入功能:
- 訪問 添加部分
- 放置一個 嵌入特徵 在工作區上
- 插入您的 視訊程式碼 (了解有關 HTML 中視頻元素的更多信息)
- 選擇 儲存並關閉
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日