Zblog插入西瓜视频和头条视频的方法（自适应浏览器宽度）

一些站长需要在网站中插入西瓜视频，可惜字节跳动公司没有对外公布站外引用方法。

很多年前，还是优酷称霸视频内容的时代，优酷，土豆，酷6，腾讯视频等众多网站每个视频下面有个站外引用链接。博客站长需要引用这些网站某个视频时可以很简单的在编辑器内粘贴插入即可。如今西瓜视频成为主流，但官方却没有提供视频站外引用办法，今天给大家分享下我研究出来的办法。

一、西瓜视频站外引用

直接上例子，西瓜视频网址为 https://www.ixigua.com/7003691405537182238?logTag=c6fbaca4f667cc2e25a1

站外引用链接则为 https://www.ixigua.com/iframe/7003691405537182238

例如：我的Zblog后台编辑器是Emeditor，则点击编辑器栏的视频图标，粘贴这个网址插入即可。

二、头条视频站外引用

头条视频其实就是西瓜视频，例如某头条视频URL为https://www.toutiao.com/video/7148935844437426729/?from_scene=video&log_from=a6484d9d43db9_1674538978843

则对应的站外引用网址为：https://www.ixigua.com/iframe/7148935844437426729

聪明的你一定看明白了，最关键的是https://www.ixigua.com/iframe/网址后面加上那一串视频ID即可。

三、iframe引用代码

上面讲的是可视模式下的插入方法，如果是在源代码模式下，我们一般用iframe插入即可。其中有两个数字参数为视频宽度和高度，可以手动调整像素宽高，让视频不出现黑边为好。宽度和高度填写多少像素合适，其实是个难题，因为PC浏览器和手机浏览器的宽度均不同，如果写小了，电脑上只显示一小块视频，写大了，移动端又超出范围。有人想到填写宽度百分比并空白高度，抱歉，这个也有bug。下例中视频宽度和高度适合PC查看，手机上就显示只有一小部分窗口了。

＜iframe frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="https://www.toutiao.com/iframe/7148935844437426729" width="960">

四、视频插入浏览器自适应问题

有人可能发现网站插入视频不能自适应浏览器宽度问题，这个主要取决于你的主题样式对视频的兼容性，如果要PC端和移动端都能自适应视频宽度和高度，而且不产生黑边，请自行改造样式。

本人附上改造代码，需要者可购买查看，修改JS和CSS文件两处。