wordpress 插入腾讯视频bilibili等网站视频代码教程，不会变扁

admin
网络素材
2024年8月15日

直接插入bilibili或者腾讯视频的分享代码后，保存后会发现文章页面的视频变的很扁。

直接上案例，案例使用bilibili，其他视频网站分享代码修改原理一样

比如说，我打算插入这个视频：https://www.bilibili.com/video/BV1rJ411r7UY

直接获取分享代码后，分享代码是这样
<iframe src=\\\\\\\”//player.bilibili.com/player.html?aid=79254285&bvid=BV1rJ411r7UY&cid=135630360&page=1\\\\\\\” scrolling=\\\\\\\”no\\\\\\\” border=\\\\\\\”0\\\\\\\” frameborder=\\\\\\\”no\\\\\\\” framespacing=\\\\\\\”0\\\\\\\” allowfullscreen=\\\\\\\”true\\\\\\\”> </iframe>

解决方法

需要手动修改一下代码

改成如下内容

<iframe id=\\\\\\\"video\\\\\\\" src=\\\\\\\"//player.bilibili.com/player.html?aid=79254285&bvid=BV1rJ411r7UY&cid=135630360&page=1\\\\\\\" scrolling=\\\\\\\"no\\\\\\\" border=\\\\\\\"0\\\\\\\" frameborder=\\\\\\\"no\\\\\\\" framespacing=\\\\\\\"0\\\\\\\" allowfullscreen=\\\\\\\"true\\\\\\\"> </iframe>
<script type=\\\\\\\"text/javascript\\\\\\\">document.getElementById(\\\\\\\"video\\\\\\\").style.height=document.getElementById(\\\\\\\"video\\\\\\\").scrollWidth*0.8+\\\\\\\"px\\\\\\\"</script>

注意看，一共修改了两个地方

第一个地方，在官方分享代码第一句 iframe 后面，添加了一个 id=\\\\\\\”video\\\\\\\”

第二个地方，就是整个第二行

wordpress 插入这种视频分享代码的位置，插入，媒体，嵌入，填写嵌入代码

$\\\\\\\"wordpress$

修改后使用效果如下

插入mp4直链文件的方法看这里：https://www.mfpud.com/topics/887/

wordpress插入自适应视频的代码

wordpress直接插入视频，分辨率手动设置去手机上看会很尴尬

万幸的是使用这个代码就解决了

直接点插入/编辑媒体，嵌入，请将嵌入代码贴入下方

<video controls preload=\\\\\\\"auto\\\\\\\" poster=\\\\\\\"封面图链接\\\\\\\" max width=\\\\\\\"100%\\\\\\\" max height=\\\\\\\"100%\\\\\\\" src=\\\\\\\"视频链接\\\\\\\"></vid