媒體 — 影片

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

店面首頁上的影片

NOTE
若您正在對下列專案進行重大變更 Page Builder 內容,建議您增加 管理員工作階段存留期 以防止工作階段在工作時逾時。

視訊工具箱

視訊工具箱

工具
圖示
說明
移動
移動圖示 {width="25"}
將視訊移至舞台上的另一個位置。
(標籤)
Video
將目前的內容容器識別為視訊。 將滑鼠停留在影像容器上可檢視工具箱。
設定
設定圖示 {width="25"}
開啟 Edit Video ​頁面,您可在此變更視訊和容器的屬性。
隱藏
隱藏圖示 {width="25"}
隱藏目前的視訊。
顯示
顯示圖示 {width="25"}
顯示隱藏的視訊。
複製
「複製」圖示 {width="25"}
製作視訊副本。
移除
移除圖示 {width="25"}
從舞台刪除視訊。
NOTE
隱藏的元素會儲存在資料庫中,且對客戶不可見。 不過,搜尋引擎和其他對您的網站進行編目的機器人可看見這些元素。 如果透過具有不可見屬性的API呼叫提出請求,這些區段也會當作內容的一部分傳回,除非您將其從階段中移除。

新增視訊

  1. 開始之前,請導覽至 YouTubeVimeo 內嵌的視訊並複製連結。

    另外,您也可以複製有效視訊檔案的直接連結。 另請參閱 基本視訊設定 的有效連結。

  2. 在 Commerce 管理員,返回 Page Builder 您想要新增視訊的工作區。

  3. 在 Page Builder 面板,展開 Media 並拖曳 Video 舞台的預留位置。

    將視訊預留位置拖曳到舞台 {width="600" modal="regular"}

  4. 將滑鼠停留在視訊容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

  5. Video URL,貼上您複製之視訊的URL。

    的URL Page Builder 此範例中使用的視訊為: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. 若要限制 Maximum Width 在視訊中,輸入最大寬度(畫素)。

    如果留白,視訊寬度將和容器一樣寬,可允許邊界和邊框間距。

  7. 在右上角,按一下 Save 以套用設定並返回 Page Builder 工作區。

變更視訊設定

  1. 將滑鼠停留在視訊容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

  2. 請依照下列章節修改設定:

  3. 在右上角,按一下 Save 以套用設定並返回 Page Builder 工作區。

基本視訊設定

  1. 若要變更目前的視訊,請更新 Video URL.

    請輸入有效的視訊URL。 有效的視訊URL可以連結至:

    • YouTube影片: https://youtu.be/CoDhMRUUjeI
    • Vimeo影片: https://vimeo.com/190156113
    • 有效的視訊檔案(.mp4 建議使用): https://myvideos.com/spiral.mp4
  2. 若要變更店面中視訊允許的寬度,請輸入新的 Maximum Width 以畫素為單位。

    如果留白,視訊會延伸容器的完整寬度,減去邊界和邊框間距的裕量。

  3. 若要在頁面載入後自動啟動視訊,請設定 AutoplayYes.

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

    如果自動播放設為 No,影片只會根據使用者需求播放。

Advanced

  1. 若要控制視訊在容器中的水平位置,請選擇 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 輸入畫素數目,以定義用來將邊框每個角落倒圓角的半徑大小。
  • (選擇性)指定下列專案的名稱: CSS classes 目前的樣式表以套用至視訊容器。

    以空格分隔多個類別名稱。

  • 以畫素為單位,輸入 Margins and Padding 指定視訊容器的外邊界和內邊距。

    在視訊容器圖表中輸入每個對應的值。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    容器區域 說明
    Margins 套用至容器所有側邊外部邊緣的空白空間量。
    Padding 套用至容器所有邊內側邊緣的空白空間量。

移動視訊

  1. 將滑鼠停留在視訊容器上以顯示工具箱,然後選擇 移動 ( 移動圖示 {width="20"} )圖示。

    移動視訊 {width="500" modal="regular"}

  2. 選取視訊並將其拖曳到新的位置,正好在紅色指引的下方。

    使用紅色指引放置影片 {width="500" modal="regular"}

從舞台移除影片

  1. 將滑鼠停留在視訊容器上以顯示工具箱,然後選擇 移除 ( 移除圖示 )圖示。

  2. 提示確認時,按一下 OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d