iframe 内嵌视频优化显示插件 Z-BlogPHP 1

应用开发者 心扬 19天前 141

iframe嵌入视频优化(iframe video optimization)插件支持将 iframe 嵌入视频等比缩放显示,

对 iframe 标签进行 HTML5 格式化,同时解决 iframe 因 CSP 而无法加载预览的问题等。


效果预览,默认的 iframe 内嵌视频的显示效果并不理想,通过本插件添加的 iframe 能自适应正文区域的宽度,并自动扩展高度:


如何使用?

在文章编辑页面通过本插件添加 iframe 视频即可。



可以在插件设置中添加自定义的 CSP 域名,避免出现因 CSP 问题而无法预览视频的问题。


最初是一位 Neditor 用户朋友提的建议,希望加到 Neditor 中,不过为了避免编辑器过于臃肿,

以及兼容其他编辑器等,还是做成插件更方便些。


原理其实很简单,就是加个 div 容器和相关样式。

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}
.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
<div class="iframe-container">
  <iframe src="url..." allowfullscreen></iframe>
</div>




免费插件,欢迎安装使用!


Neditor、Editormd、网易云音乐、多主题等插件的开发者。
请通过邮件(chrishyze#163.com,改#为@)或论坛消息联系。

最后于 7天前 被心扬编辑 ,原因:
最新回复 (3)
全部楼主
  • 用户 单身男人坏过 16天前 0
    引用 2
    用起来不错,好像视频只能添加到文章最下面,插入视频就不能回车了
  • 应用开发者 心扬 15天前 0
    引用 3
    单身男人坏过 用起来不错,好像视频只能添加到文章最下面,插入视频就不能回车了
    目前可以暂时通过源码模式插入新内容,这个后面会改进。

    Neditor、Editormd、网易云音乐、多主题等插件的开发者。
    请通过邮件(chrishyze#163.com,改#为@)或论坛消息联系。

  • 应用开发者 心扬 7天前 0
    引用 4
    心扬 目前可以暂时通过源码模式插入新内容,这个后面会改进。
    最新的版本已经修复改进此问题。

    Neditor、Editormd、网易云音乐、多主题等插件的开发者。
    请通过邮件(chrishyze#163.com,改#为@)或论坛消息联系。

    • ZBlogger技术交流中心
      5
          
返回