媒體 — 影片

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined
undefined

使用視訊內容型別將託管於YouTube或Vimeo的視訊新增至Page Builder 階段。將視訊嵌入頁面或區塊，或產品與類別說明中相當容易。

店面首頁上的 {width="700" modal="regular"}

NOTE

如果您對Page Builder內容進行重大變更，建議您增加管理員工作階段存留期，以防止工作階段在您工作時逾時。

視訊工具箱

工具

圖示

說明

移動

{width="25"}

將視訊移至舞台上的另一個位置。

（標籤）

Video

將目前的內容容器識別為視訊。將滑鼠停留在影像容器上可檢視工具箱。

設定

{width="25"}

開啟 Edit Video 頁面，您可以在此變更視訊和容器的屬性。

隱藏

{width="25"}

隱藏目前的視訊。

顯示

{width="25"}

顯示隱藏的視訊。

複製

{width="25"}

製作視訊副本。

移除

{width="25"}

從舞台刪除視訊。

NOTE

隱藏的元素會儲存在資料庫中，且對客戶不可見。不過，搜尋引擎和其他對您的網站進行編目的機器人可看見這些元素。如果透過具有不可見屬性的API呼叫提出請求，這些區段也會當作內容的一部分傳回，除非您將其從階段中移除。

新增視訊

開始之前，請導覽至您要內嵌的YouTube或Vimeo影片，並複製連結。

另外，您也可以複製有效視訊檔案的直接連結。如需有效的連結，請參閱基本視訊設定。
在Commerce管理員中，返回您要新增視訊的Page Builder工作區。
在Page Builder面板中，展開 Media 並將 Video 預留位置拖曳到舞台。

{width="600" modal="regular"}
將滑鼠懸停在視訊容器上以顯示工具箱，然後選擇設定（ {width="20"} ）圖示。
針對 Video URL，貼上您複製之視訊的URL。

此範例中使用的Page Builder視訊的URL是： https://www.youtube.com/watch?v=Y0KNS7C5dZA。
若要限制視訊的 Maximum Width，請輸入最大寬度（畫素）。

如果留白，視訊寬度將和容器一樣寬，可允許邊界和邊框間距。
在右上角，按一下 Save 以套用設定並返回Page Builder工作區。

變更視訊設定

將滑鼠懸停在視訊容器上以顯示工具箱，然後選擇設定（ {width="20"} ）圖示。
請依照下列章節修改設定：
- 基本
- 進階
在右上角，按一下 Save 以套用設定並返回Page Builder工作區。

基本視訊設定

若要變更目前的視訊，請更新 Video URL。

請輸入有效的視訊URL。有效的視訊URL可以連結至：
- YouTube影片： https://youtu.be/CoDhMRUUjeI
- Vimeo影片： https://vimeo.com/190156113
- 有效的視訊檔案（建議使用.mp4）： https://myvideos.com/spiral.mp4
若要變更店面中視訊允許的寬度，請輸入新的 Maximum Width 畫素。

如果留白，視訊會延伸容器的完整寬度，減去邊界和邊框間距的裕量。
若要在頁面載入後自動啟動視訊，請將 Autoplay 設為Yes。

如果「自動播放」設定為Yes，則視訊會根據原則在播放時設為靜音。不過，即使使用此設定，行動裝置也無法自動播放您的視訊。如需這些原則的詳細資訊，請參閱下列開發人員資源：
如果「自動播放」設定為No，則視訊只會依使用者要求播放。

Advanced

若要控制視訊在容器中的水平位置，請選擇 Alignment：

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
選項	說明
`Default`	套用目前佈景主題樣式表中指定的對齊預設設定。
`Left`	沿著視訊容器的左邊框對齊內容，並允許指定的任何邊框間距。
`Center`	對齊視訊容器中央的內容，並容許指定的任何邊框間距。
`Right`	沿著視訊容器的右邊框對齊內容，並容許任何指定的邊框間距。

設定套用至視訊容器所有四個側面的 Border 樣式：

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
選項	說明
`Default`	套用關聯樣式表所指定的預設邊框樣式。
`None`	未提供任何容器框線的可見指示。
`Dotted`	容器邊框會以虛線顯示。
`Dashed`	容器邊框會以虛線顯示。
`Solid`	容器邊框會以實線顯示。
`Double`	容器邊框會以雙線顯示。
`Groove`	容器框線會顯示為槽線。
`Ridge`	容器框線會顯示為脊線。
`Inset`	容器框線會顯示為內嵌線。
`Outset`	容器邊框會顯示為外線。

如果您設定了None以外的框線樣式，請完成框線顯示選項：

邊框顏色 {width="600" modal="regular"}

table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
選項	說明
Border Color	選擇色票、按一下檢色器，或輸入有效的顏色名稱或相等的十六進位值，以指定顏色。
Border Width	輸入邊框線條寬度的畫素數。
Border Radius	輸入畫素數目，以定義用來將邊框每個角落倒圓角的半徑大小。