在文章里面插入視頻是很多網(wǎng)站都會(huì)有的需求，不過視頻不會(huì)和圖片一樣可以等比例自動(dòng)適配移動(dòng)端的尺寸：即使控制了視頻的最大寬度為100%，但是高度還是PC端的高度，這就會(huì)導(dǎo)致視頻尺寸異常的情況，嚴(yán)重影響用戶瀏覽體驗(yàn)。不過不用擔(dān)心，在我們WPCOM開發(fā)的WordPress主題中此問題已經(jīng)得到完美解決，下面來簡(jiǎn)單介紹下使用我們的主題如何完美適配移動(dòng)端顯示。
視頻添加到網(wǎng)站文章里面一般分為兩種方式：
- MP4格式的視頻文件或者鏈接；
- 外部視頻網(wǎng)站通用分享代碼
針對(duì)這兩種方式，目前都有對(duì)應(yīng)的解決方案，我們分別來介紹。
MP4格式視頻的適配
如果插入的是視頻是MP4格式，那就簡(jiǎn)單了，可以直接添加視頻區(qū)塊，如果是本地視頻文件，可以直接上傳后插入，如果是外鏈的mp4視頻地址資源，則可從URL插入，如圖：
通過此方法添加的視頻主題會(huì)自動(dòng)調(diào)用內(nèi)置的plyr播放器，此播放器主題已經(jīng)配置了默認(rèn)的視頻比例：16:9，也就是說不管PC端還是移動(dòng)端訪問，播放器都會(huì)自動(dòng)對(duì)視頻尺寸進(jìn)行調(diào)整，無需其他額外操作。
通用分享代碼的自動(dòng)適配
通過外部視頻網(wǎng)站獲取的通用分享代碼一般都是通過iframe的方式來引入視頻，不過iframe是無法自動(dòng)識(shí)別里面內(nèi)容的具體尺寸，所以這種分享代碼一般會(huì)在代碼里面就預(yù)先配置好了尺寸，但是問題是預(yù)先配置的尺寸是固定的尺寸，不管在哪里顯示都是按這個(gè)尺寸，這會(huì)導(dǎo)致不僅在移動(dòng)端顯示異常，就連PC端可能都無法達(dá)到預(yù)期效果。
針對(duì)此問題我們?cè)缙陂_發(fā)了一個(gè)視頻代碼的區(qū)塊，可以對(duì)尺寸重新定義，來優(yōu)化顯示，并在移動(dòng)端寬高進(jìn)行了優(yōu)化。不過移動(dòng)端的效果依然不是很理想，所以就在近期我們特意對(duì)此區(qū)塊進(jìn)行了優(yōu)化更新，更新優(yōu)化后的區(qū)塊我們將原先的寬度和高度計(jì)算成固定比例，例如高度設(shè)置的是600，寬度設(shè)置的是400，那么我們會(huì)自動(dòng)按寬高比3:2來自動(dòng)適配，這樣不管PC端還是移動(dòng)端，都能保持一樣比例來顯示視頻，達(dá)到自適應(yīng)的效果。
