工作室今天发布了一篇文章,需要插入一段视频,说起来也不是多大的事情,国内很多主题都直接带视频插入功能(比如Kratos),也可以采用插件的方式(比如Smartideo),当然也可以使用今天提到的方法。
PS:就在我写下这篇文章时,Kratos进行了大升级,设置变更太大了,以至于网站的主页内容全部消失了,并且之前贴的所有优酷视频也无法播放。而Smartideo因为其他插件禁用Embeds功能前端无法显示。这也是使用主题和插件实现某些功能的缺点,一旦主题或者插件不好用了或者被其他插件屏蔽了某些功能,所有文章内容都要重新编辑一次。
OK,开始今天的正式话题。
因为发布的文章是从微信公众号上转过来的,所以视频来源用的是腾讯。它的分享方式有两种,一种是直接复制页面地址,还有一种框架形式叫做通用代码,我们要用到的就是后面那个。
tencent-video-iframe.png
复制代码后,直接贴进WordPress的文章,然后预览一下效果。窗口竟然这么小,加上腾讯的推荐内容和菜单,显示效果简直惨不忍睹。
insert-tencent-video-iframe.png
让我们看看之前的代码:

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0937smmsj5" allowFullScreen="true"></iframe>

我们可以通过设定框架的宽度和高度来让窗口放大,不过一旦使用手机后整个窗口就会撑开页面。
mobile-style.png
那该如何达到自适应的效果呢?让我们看看下面的代码:

<iframe id="video" src="https://v.qq.com/txp/iframe/player.html?vid=t0937smmsj5" width="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>

<iframe>的内容变化不大,只是将宽度修改为100%,并为<iframe>增加了一个名为“video”的id号。
第二段代码才是重中之重,它才是实现自适应的核心。如果只是设置宽度为100%的话,打开窗口是窄窄的一小条,因为高度并没有给定,所以它仍按默认的宽度来,所以需要通过javascript将宽度和高度关联,即高度等于0.8倍的宽度。

最终效果可见《【正面管教】干货系列—培养孩子自立的秘笈》一文(非本人网站),也欢迎喜欢心理学的朋友共同交流。

最后修改:2022 年 11 月 23 日
如果觉得我的文章对你有用,请随意赞赏