Products
GG网络技术分享 2025-03-18 16:14 0
大家好，这里是关于[Wordpress原比例插入bilibili视频]，[一个巨大的前端开发资源清单，让你掌握前沿科技]问题的解答，希望对您有所帮助。如果你还想了解更多这方面的信息，请关注本站其他相关内容，共同学习吧！
教程大全B站
如果自己插入过B站视频的话基本都会遇到过视频播放显示不全的问题。
B站视频下放给出的默认嵌入代码是：
<iframe src=\"//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"> </iframe>
直接用这个代码插入后是这样的：
其实只需要改一下嵌入代码即可
使用下方两种代码嵌入：
我们使用过程中将//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1这个视频地址换成你要插入的地址即可。
<iframe id=\"spkj\" src=\"//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1\"
width=\"100%\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">
<span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px;
overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\"></span>
</iframe>
<script type=\"text/javascript\"> document.getElementById(\"spkj\").style.height=document.getElementById(\"spkj\").scrollWidth*0.76+\"px\"; </script>效果如下：
<iframe src=\"//player.bilibili.com/player.html?aid=925341116&bvid=BV1gT4y1V7VR&cid=181133425&page=1\" width=\"100%\" height=\"500\" frameborder=\"0\" scrolling=\"no\" sandbox=\"allow-top-navigation allow-same-origin allow-forms allow-scripts\" allowfullscreen=\"allowfullscreen\"></iframe>
效果如下：
分享最全面，巨丰富前端开发学习资源清单，让你在前端编程的路上少走弯路，多一些实战，少一点烦恼，多一点钱，少花点时间，多一个女朋友，少一份孤独。
点击上方“Web前端进阶指南”关注我呦
跟程序员小强一起学前端
最近有些网友，也是做前端开发的，就问，作为前端开发的，平时都看哪些网站关注最新学习信息？其实啊，尤其使我们做前端的，更需要掌握最新的技术，然后去学习并掌握应用到我们的项目当中，显而易见的是，我们前端技术是最容易接触到客户的，也是跟客户的眼睛打交道，我们无时无刻我在跟着社会走，跟着大众的眼睛走，他们看到哪里，我们就要写到哪里，这就是所谓的用户体验。
技术更新迭代非常迅速，想想Vue，在短短的时间里就已经到3.0了，已经掌握2.0的小伙伴们希望抓紧熟知Vue 3.0，还没有掌握2.0的小伙伴们可就要加油啦。技术不等你啊，可想要丰厚的报酬就得掌握一手的技术啊。
好了，话不多说，带你们看看从哪些地方就可以掌握第一手的学习资料和资讯。
首当其冲就是它了，gitHub是一个面向开源及私有软件项目的托管平台，除了git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、Vue、python 等。
除此之外，你还可以每天打开Github或email看有没有watch项目的消息或者自己项目的issue，然后 Explore 看看社区内项目的走势，然后开始按照TODO来学习，并开始push,push 并不断的在github检查自己写的代码，这样真的能提高很快的。
你也可以关注下Github的blog, 看看有没有新闻，偶尔看下Github的tip，有时候会一时兴起去搜索下有意思的项目，看到有意思的人就会去他的博客看看，这样就可以扩展自己的技术，到晚上要睡觉之前会考虑是不是要写篇博客，打开编辑器写好后push上去，这样既能完成自媒体的工作，又让你的技术更上一层楼，岂不美哉，哈哈哈。
github前端发布浏览排行榜
看看图上这些前端大神，在GitHub上留下了多少自己的项目，还有那么多人浏览，难道你不想吗？作为程序员，一定要在GitHub上留下自己的项目啊。
在这里给你们列出一些值得阅读mark文章链接吧。一般人都看不到，都给你们，感觉被人。。。
1、github前端工程——基础篇
https://github.com/fouber/blog/issues/10
2、这里收集了许多移动端上遇到的各种坑与相对解决方案
https://github.com/RubyLouvre/mobileHack
3、各种大神的经验技术分享
https://github.com/DDFE/DDFE-blog
4、github前端发布浏览排行榜
http://githubrank.com/
5、优质的中文前端博客
https://github.com/FrankFang/best-chinese-front-end-blogs
这里是程序员的天堂，也是我们学习的好地方，众多的代码编程者在这里出发，总结自己的代码经验，在总结自己知识的同时，又能分享给别人，真正的代码乐事，广泛的应用技术，丰富的交流经验，好心肠的程序员，都会让你从中受益，提升自己的编程水平。
像这样的博客园还有很多，例如：CSDN、新浪博客，黑马程序员，51CTOP、itpub博客，醉牛前端，知乎、简书、掘金、微信公众号等等优秀的团队博客，当然还有我们的@今日头条，这里面有大项目，超丰富的知识等你学习。
此外还有一些个人的博客，也是炒鸡火爆的，当然好多超级大神们也不更新了，我就不说了：
1、阮一峰的网络日志
http://www.ruanyifeng.com/blog/
2、廖雪峰的官方网站
https://www.liaoxuefeng.com/
3、张鑫旭
https://www.zhangxinxu.com/wordpress/
4、大前端
http://www.daqianduan.com/
网站是我们学习的最基础，最直接技术的资源，上面有各个技术的开发文档，案例，教程、如果说那些博主分享他们的经验，那这些网站就教我们入门，让我们从基础学起。
每出现一门新的技术，相应的都会有自己的网站作为宣传和教程，我们可以去他们官方网站进行查看，除此之外，也有一些网站也会去分享学习最新的技术，例如：
1、W3C菜鸟教程
https://www.runoob.com/
2、WEB技术分享
https://www.helloweba.net/
3、OSCHINA
https://www.oschina.net/
4、前端里
http://www.yyyweb.com/
5、segmentfault
https://segmentfault.com/
6、coursera
https://www.coursera.org/
7、PHP中文网站
https://www.php.cn/
8、慕课网
https://www.imooc.com/
9、网易云课堂
https://study.163.com/
10、中国大学MOOC
https://www.icourse163.org/
11、极客学院/宅客学院
https://www.jikexueyuan.com/
12、bilibili
https://www.bilibili.com/
注：不包括各个技术的官方网站
作为相当资深的切图仔，不得不感谢这么多年给我们提供插件的这些友友们啊，真的帮了不少的忙，省了不少的功夫，也装了不该有的逼，在这里，确实要感谢一些他们啊，没有他们，不知道刚工作的时候还能不能切图。[哈哈][哈哈]
1、jquery插件库
https://www.jq22.com/
2、swipe中文网
https://www.swiper.com.cn/
4、bootstrap
https://www.bootcss.com/
5、baguetteBox.js（响应式的图像 Lightbox 插件）
http://feimosi.github.io/baguetteBox.js/
6、popper.js（弹出层）
https://popper.js.org/
7、anime.js做动画效果
http://www.animejs.cc/
8、animate.css
https://daneden.github.io/animate.css/
9、ECharts
https://www.echartsjs.com/zh/index.html
10、chart.js中文网
http://chartjs.cn/
11、perfect scrollbar（滚动条插件）
https://github.com/mdbootstrap/perfect-scrollbar
12、Impress.js（旋转）
https://impress.js.org/#/bored
13、fullPage（全屏gundomg）
http://fullpage.81hu.com/
14、zepto.fullpage（专注于移动端的fullPage.js，依赖Zepto）
https://www.findbestopensource.com/
15、turn.js （翻页的效果）
http://www.turnjs.com/
16、h5播放器
https://developer.jwplayer.com/jwplayer/docs
17、日期选择框
http://www.miniui.com/
18、Foundation（多种Web上的UI组件）
https://www.apache.org/foundation/
19、Fontello（图标字体生成器）
https://www.apache.org/foundation/
20、Hover.css（鼠标 Hover 态的效果）
http://ianlunn.github.io/Hover/
21、NProgress.js（页面加载时有更好的loading效果）
http://ricostacruz.com/nprogress/
22、favico.js（改变网页图标）
http://lab.ejci.net/favico.js/
23、ant.design（提供React 和 Angular 组件实现）
https://ant.design/components/grid-cn/
等等，还有好多插件库让你选择，根据自己时间开发需求找找，不过自己也得会改动哦
上面的插件比较的系统，属于那种封装、轻量级的一种框架，运气来比较灵活，易维护，而下面这些网站上的素材是各个小伙伴们实打实写的，没有进行封装，是纯粹的为了某一个特效而写的素材插件，也要感谢他们哦，我们来看看。
1、酷站代码
http://www.5icool.org/
2、脚本之家
https://www.jb51.net/
3、懒人之家
https://www.lanrenzhijia.com/
4、站长素材
http://sc.chinaz.com/jiaoben/
5、特效网
http://www.zhaotexiao.com/js/
6、懒人图库
http://www.lanrentuku.com/js/
7、17素材网
https://www.17sucai.com/
8、51前端
http://www.51qianduan.com/
9、PHP中文网
https://www.php.cn/xiazai/js
10、青岛星网
http://www.qdxw.net/jscode/
11、JS代码
https://www.jsdaima.com/js-128.html
工欲善其事必先利其器，找到一些有利于我们开发的工具，那着实是一件美事啊，让你的效率也大大提高的同时，也让你在别的同事面前，大显神威，“哇，你怎么弄的，这么快，这么好看”，记住，有工具你不用，你想干啥。
1、GitHub Desktop（私有软件项目的托管平台）
https://desktop.github.com/
2、FastStone Capture
https://faststone-capture.en.softonic.com/
3、溜云库
https://www.3d66.com/ku/
4、程序员的工具箱
https://tool.lu/
5、免费的CDN加速器
https://www.bootcdn.cn/
6、大前端
http://www.daqianduan.com/nav
7、在线APP原型工具
https://www.xiaopiu.com/
8、Parcel（极速零配置Web应用打包工具）
https://parceljs.org/
9、Chrome扩展程序
https://chrome.google.com/webstore/category/extensions?hl=zh-CN
10、Superpreview（跨浏览器测试工具）
https://www.microsoft.com/en-us/download/details.aspx?id=2020
以上的这些前端资源也是在平时开发中常用到的，如有不足之处，多多指教。
如果还有您想了解，却不知道的资源，咨询我，我帮您找。
如果还您有知道，我不知道的，也请您告知。
想了解更多的前端技术，关注我，持续为您输出干货，谢谢！
正在准备输出JavaScript
Demand feedback
