globaloxs / yii2-video-embed-widget
从视频URL生成视频嵌入代码的Yii2扩展
dev-master
2016-04-01 16:56 UTC
Requires
- embed/embed: dev-master
This package is not auto-updated.
Last update: 2024-09-17 19:44:39 UTC
README
从视频URL生成视频嵌入代码的Yii2扩展。
此小部件在传递有效的视频URL时将返回视频嵌入代码。它与任何网络服务兼容,例如youtube、vimeo、dailymotion、hulu等。
此小部件接受以下参数
url
: **必需**resonsive
: 默认为true
container_id
: 默认为""
空字符串container_class
: 默认为""
空字符串show_errors
: 默认为false
注意:此扩展依赖于由 https://github.com/oscarotero/Embed 创建的 [embed/embed] (Oscar Otero) 包。Oscar的Embed类负责生成基于提供的视频URL的视频嵌入代码。我简单创建了一个带有一些额外设置的Yii2包装小部件。
安装
安装此扩展的首选方法是使用 composer。
运行以下命令之一
php composer.phar require cics/yii2-video-embed-widget "dev-master"
或
"cics/yii2-video-embed-widget": "dev-master"
将以下内容添加到您的 composer.json
文件的 require 部分中。
使用
安装扩展后,只需在代码中使用它,通过添加以下代码即可
<?= \cics\widgets\VideoEmbed::widget(['url' => 'http://www.youtube.com/watch?v=NMjA5N7kbEQ', 'show_errors' => true]); ?>
或首先添加命名空间,然后在输出返回的嵌入代码时仅引用类名
use cics\widgets\VideoEmbed; ... <?= VideoEmbed::widget(['url' => 'http://www.youtube.com/watch?v=NMjA5N7kbEQ']); ?>
响应式
默认启用了响应式视频显示,但要在页面上以响应式方式显示视频,您需要将以下CSS规则添加到您的样式表中
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
注意:如果您不希望视频以响应式方式显示,可以通过将
responsive
参数设置为false
或简单地不在样式表中包含上述CSS来禁用响应式显示。
<?= VideoEmbed::widget(['responsive' => false, 'url' => 'http://www.youtube.com/watch?v=NMjA5N7kbEQ']); ?>
自定义容器ID和类设置
您可以通过传递相应的参数来设置自定义容器ID或自定义容器类。
<?= VideoEmbed::widget([ 'url' => 'http://www.youtube.com/watch?v=NMjA5N7kbEQ', 'container_id' => 'yourCustomId', 'container_class' => 'your-custom-class a-second-custom-class', ]); ?>