视频

对一些人来说，视频就是一连串的图片。对其他人来说，这是最好的沟通方式之一。Video元素嵌入一个托管在第三方网站(如YouTube或Vimeo)上的视频，在页面的任何位置。

本课:

1. 添加视频
2. 视频设置
3. 设置视频尺寸
4. 探索视频元素
5. 使用自定义代码嵌入视频

添加视频

拖放一个视频元素添加到页面上元素面板或按Command + E(Mac)或Control + E(在Windows上)打开快速的找到．

视频格式设置

在页面上放置视频元素后，就可以访问视频设置．如果无法看到设置，请双击视频元素或选择它并按enter键调出设置。粘贴到URL点击回车键，视频的缩略图就会出现在video元素中。

支持的视频源

• YouTube(如果你想要更多地控制你的YouTube视频，尝试使用YouTube视频元素）
• Vimeo
• DailyMotion网站
• KickStarter(只需粘贴主活动URL，我们将抓取主活动视频)
• 泰德(多语言支持)
• Wistia
• Ustream
• 转播画面
• 抽搐
• 土豆网
• Hulu
• SproutVideo

如果视频源不能正常工作，请让我们知道我们会试着添加它!

必须知道

目前，上传自己的视频文件到资产面板并且不支持在video元素中使用它们。不过，你可以设置为静音上传视频背景视频．

设置视频尺寸

如果你将video元素放到一个section中，它将占用该section的整个宽度。将它移动到一个容器中，它将占据整个容器的宽度。如果您将它移动到一列中，它将尊重该列内的可用空间。

如果您想设置自定义宽度和高度的视频，您可以创建一个自定义div块．要做到这一点，从元素面板中拖动一个div块。给它一个宽度值，另一个高度值。现在，如果你将视频拖到这个自定义div块中，它将符合这个大小。

探索视频元素

在Webflow中，还有其他方法可以向项目中添加视频:

• YouTube视频
• 背景视频
• Lightbox
• 富文本
• 自定义代码嵌入

YouTube视频元素

的YouTube视频元素可以让你嵌入来自YouTube URL的视频，并为你提供YouTube嵌入功能提供的所有显示选项，包括显示来自频道的相关视频的能力，设置特定的开始时间，显示或隐藏视频控件，等等。了解更多关于YouTube视频元素的信息．

背景视频组件

的背景视频组件允许您添加没有音频的运动背景。不像视频元素只支持Youtube和Vimeo链接，背景视频元素可以接受你上传的任何视频文件。了解更多关于背景视频组件的信息．

Lightbox元素

的lightbox元素让你在弹出模式中打开一个视频。与视频元素类似，灯箱支持YouTube和Vimeo链接。了解更多关于灯箱元素的信息．

富文本元素和富文本字段

的富文本元素还允许您添加视频。这是一个很好的方式，让你的网站的合作者(内容编辑)添加尽可能多的视频到他们的页面。当您使用它从数据库中提取数据时，这将更加强大富文本字段在CMS集合中。

当然，您也可以使用Video元素从集合中拉入数据视频领域．

使用自定义代码

控件还可以添加HTML视频嵌入元素。

1. 添加一个嵌入元素添加到页面中
2. 粘贴你的视频代码（HTML5视频入门）
3. 保存