wp使插入的FLASH視頻自適應寬高度及為后臺編輯器添加自定義按鈕

2018年7月12日02:04:33 發表評論 119
摘要

記得我當初也發現了這樣的問題,通過視頻網站分享的視頻代碼(embed、object或iframe方式)貼到文章里發布后,在電腦上看可能會好好的,但是在手機的瀏覽器上看就會超出屏幕

wp使插入的FLASH視頻自適應寬高度及為后臺編輯器添加自定義按鈕

表格還好直接用百分比就可以自適應,但是Iframe的寬度屬性設置了百分比的話,高度不能自適應屏幕。把高度設置成百分比,就會出現一個長方形的視頻,自己試過就知道了。

網上也有一大堆的解決辦法,嘗試了很多發現起作用的并沒有幾個,也沒有能讓我滿意的適用所有網站的方法。

后來終于找到一篇文章解決了這個問題,原來視頻自適應這么簡單,只需要一段css代碼就ok了……具體效果可點我查看。

視頻自適應方法

首先,在主題的主css,如style.css中加入以下css代碼:

.lxtx-video {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
.lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

然后,后臺發布視頻時,建議以Iframe方式引用視頻網站的視頻,因為iframe方式在pc端和手機端都能完美顯示視頻,另外2種方式就不一定了!在中文本模式編輯器里用下面的類似方法引用:

<p class="lxtx-video"><iframe src="/wpjc/视频网站提供的iframe方式里的src链接/index.html" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

以優酷視頻為例,如這個視頻:http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html,用它的通用方式(也就是iframe方式),它提供的代碼如下:

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder=0 allowfullscreen></iframe>

那么我們要在文章中插入自適應視頻的話,在文本編輯器中要插入以下代碼就ok了:

<p class="lxtx-video"><iframe src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
weinxin
我的微信
本站專注IT互聯網領域,分享有用的教程和資源,目的就是希望大家共同進步,一起學習!
AG赌场網

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: