WordPress網(wǎng)站如何一行放5個(gè)視頻，詳細(xì)實(shí)現(xiàn)教程

來自：素雅營(yíng)銷研究院

方知筆記

2025年04月30日 23:37

為什么需要一行顯示多個(gè)視頻？

在WordPress網(wǎng)站中，有時(shí)我們需要在有限的空間內(nèi)展示多個(gè)視頻內(nèi)容，比如產(chǎn)品展示、教程合集或客戶案例。傳統(tǒng)的一行一個(gè)視頻的布局會(huì)占用大量垂直空間，影響用戶體驗(yàn)。通過一行放置5個(gè)視頻，可以：

提高頁面內(nèi)容密度
增強(qiáng)視覺吸引力
方便用戶快速瀏覽多個(gè)視頻選項(xiàng)
優(yōu)化移動(dòng)設(shè)備上的顯示效果

實(shí)現(xiàn)一行5個(gè)視頻的三種方法

方法一：使用Elementor頁面構(gòu)建器

安裝并激活Elementor插件

在WordPress后臺(tái)進(jìn)入”插件”>“安裝插件”
搜索”Elementor”并安裝激活

創(chuàng)建或編輯頁面

使用Elementor編輯頁面
添加一個(gè)”內(nèi)部部分”（Inner Section）

設(shè)置列布局

在內(nèi)部部分中添加5個(gè)列
調(diào)整每列的寬度為20%（5列×20%=100%）

添加視頻組件

在每個(gè)列中拖入”視頻”小工具
分別配置每個(gè)視頻的URL和其他設(shè)置

響應(yīng)式調(diào)整

在移動(dòng)設(shè)備視圖中調(diào)整列數(shù)為2或3
確保視頻在不同設(shè)備上顯示良好

方法二：使用CSS Grid布局

創(chuàng)建自定義HTML塊

在古騰堡編輯器中添加”自定義HTML”塊
或使用經(jīng)典編輯器中的”文本”模式

添加HTML結(jié)構(gòu)

<div class="video-grid">
<div class="video-item"><iframe src="視頻1鏈接"></iframe></div>
<div class="video-item"><iframe src="視頻2鏈接"></iframe></div>
<div class="video-item"><iframe src="視頻3鏈接"></iframe></div>
<div class="video-item"><iframe src="視頻4鏈接"></iframe></div>
<div class="video-item"><iframe src="視頻5鏈接"></iframe></div>
</div>

添加CSS樣式

.video-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
}

.video-item iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}

@media (max-width: 768px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
}