Zblog相关

zblog
Zblog使用中遇到的问题和解决办法

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

5个月前 (07-02)Zblog相关3952

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

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

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

一、西瓜视频站外引用

直接上例子,西瓜视频网址为 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文件两处。

版权声明:本文由贝联科技发布,如需转载请注明出处,如需分享可点击上方生成海报按钮。

分享给朋友:

相关文章

Zblog拓源企业主题修改备忘录

Zblog拓源企业主题修改备忘录

本文记录Zblog拓源企业版修改方法,这个是购买的企业版模板,非免费纯净版拓源主题,特此说明。(1)修改默认的文章内H3标题样式默认的.single h3 {     margi...

ZBlog微信公众号引流吸粉插件修正及免费下载

ZBlog微信公众号引流吸粉插件修正及免费下载

zblog后台有款不错的公众号涨粉插件,名字叫YK微信公众号引流吸粉必备神器,有需要的朋友可以自己搜索下载,本文主要记录对该插件的修改完善。一、插件现存的问题YK微信公众号引流吸粉必备神器下载安装好后,发现移动端文字排版有点乱,参下图,PC...

猫贝zblog文章自动出图插件修改备忘

猫贝zblog文章自动出图插件修改备忘

猫贝zblog文章自动出图插件免费版的就可以用了,自己修了了一些地方,这里记录一下:后台插件参数设置:字体:32,图片宽度:900,自动出图不建议打开,手动生成比较好,压缩图片:随意,随机颜色:随意修改了include.php文件部分(1)...

百度ueditor编辑器bug修复完善

百度ueditor编辑器bug修复完善

本站所用的Zblog系统后台编辑器为百度ueditor编辑器,这款编辑器使用挺方便,但有一些bug,官方也不维护修复,只好自己解决了。问题一、编辑器内上传图片撑破编辑器显示框百度编辑器ueditor上传图片后,图片尺寸小了没事,如果大了则会...

Zblog西京同城老白极简三栏主题修改备忘录

Zblog西京同城老白极简三栏主题修改备忘录

本文记载西京同城老白极简三栏主题修改细节备忘,目前已记录20多个修改点,供自己查看。(1)移动端点击菜单按钮下拉菜单去掉全屏宽度,宽度改为240px style.min.css.mainl{display:none;width:240px;...

Zblog隔壁老李果皮主题修改备忘录

Zblog隔壁老李果皮主题修改备忘录

贝联科技网站使用的是ZBLOG系统的隔壁老李出品果皮主题,当时看上这个主题主要基于两点:其一,自带了生成海报功能。其二,文章页面的两栏布局,接近今日头条样式。这个主题使用以来也发现一些问题,本人在此做以备份记录,主要是给自己看,对有遇到相同...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待

智能客服
欢迎咨询智能客服,我可以回答些简单问题