globaloxs/yii2-video-embed-widget

从视频URL生成视频嵌入代码的Yii2扩展

安装次数: 68

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 8

类型:yii2-extension

dev-master 2016-04-01 16:56 UTC

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',
	]); ?>