在寫我終於成功用特效把我媽變成灰姑娘啦這篇時,被困很久的竟然是影片嵌入後,手機版面跑位的問題!媽咪自首目前仍是CSS語法幼幼班(*´艸`*),雖然最後有成功把問題解決,但覺得可以更好,因此決定把過程記錄下來,也希望知道答案的朋友們能跟寶貝家分享,我們會非常感激的!本篇主要以部落格嵌入Bilibili影片來記錄。
部落格嵌入非YT影片
在詢問專業的建議後,我們把影片的大小從絕對值改為百分比,這瞬間就解決了手機版面的問題,不過,這次換電腦版跑位了!幾經測試之後,給大家猜猜看,哪一個選項才終於測試成功?
- A.寬高都設定絕對值
- B.寬高都設定百分比
- C.寬設定百分比,高設定絕對值
- D.寬設定絕對值,高設定百分比
答案:(C)
▾部落格嵌入Bilibili影片
部落格嵌入非YT影片-實驗
▾A.寬高都設定絕對值:電腦版OK,但手機版跑位了。
▾B.寬高都設定百分比:手機版OK,但電腦版跑位了。雖然手機版OK,但若彈幕沒有關閉會擋到視頻。
▾C.寬用百分比,高用絕對值:手機電腦都成功!
▾D.寬用絕對值,高用百分比:手機電腦都跑位,ㄟ害!
部落格嵌入非YT影片-補充
影片尺寸中百分比和絕對值裡的數值是可調整的。
部落格嵌入Facebook影片
▾部落格嵌入Facebook影片測試結果:
若希望手機和電腦版面都正常呈現的話,仍是C.寬設定百分比,高設定絕對值。
以上是寶貝簡單的實驗
如果有記錄錯誤的地方
或是有更好的解決方式
還請不吝指教唷^^
希望您喜歡寶貝的文章
也希望您可以幫寶貝
按火箭20次
留言支持
轉發分享
非常感謝您
延伸閱讀
幸福人生