rainlab/blogvideo-plugin

October CMS 的博客视频插件

维护者

详细信息

github.com/rainlab/blogvideo-plugin

主页

源代码

问题

安装: 67

依赖项: 0

建议者: 0

安全性: 0

星星: 2

关注者: 9

分支: 5

开放问题: 0

语言:JavaScript

类型:october-plugin

dev-master 2016-07-25 11:57 UTC

Requires

MIT ac544a9a15647cc1e3727c2c855b306c40422df0

  • Alexey Bobkov <aleksey.bobkov.woop@gmail.com>
  • Samuel Georges <daftspunky.woop@gmail.com>

blogvideooctoberoctobercms

This package is auto-updated.

Last update: 2024-09-15 06:44:56 UTC

README

此插件扩展了 RainLab Blog 插件，增加了响应式视频嵌入功能。插件已与 Vimeo 和 YouTube 视频进行测试，但理论上可以使用任何使用 iframe 嵌入的视频服务。

将视频添加到文章中

使用以下语法在博客文章中插入视频占位符

![1](video)

第一部分中的数字是占位符索引。如果在文章中使用多个视频，应使用唯一的索引

![1](video)

![2](video)

样式化响应式视频

插件在嵌入的 iframe 元素周围添加了一个包装 DIV 元素。包装器允许视频响应，适应包含列并保持宽高比。

<div class="video-wrapper ratio-16-9"><iframe ...></iframe></div>

将以下 CSS 代码添加到您的网站中，以支持视频包装器

.video-wrapper {
    position: relative;
    padding-top: 25px;
    margin-bottom: 15px;
    height: 0;
}

.video-wrapper.ratio-5-4 {padding-bottom: 80%;}
.video-wrapper.ratio-4-3 {padding-bottom: 70%;}
.video-wrapper.ratio-16-10 {padding-bottom: 62.5%;}
.video-wrapper.ratio-16-9 {padding-bottom: 56.25%;}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}