回到所有的课程
课程库

视频

使用Webflow的视频元素来嵌入第三方网站上的视频,如YouTube或Vimeo。

本视频采用了旧的用户界面。更新版本即将到来!

对一些人来说,视频只是连续播放很多图片。对其他人来说,这是最好的沟通方式之一。视频元素将视频嵌入到第三方网站,如YouTube或Vimeo,在你页面的任何地方。

在这节课中:

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

添加一个视频

视频图标缩略图

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

添加面板的媒体部分包括四个元素:图像、视频(高亮显示)、youtube和lottie动画。

格式的视频设置

一旦你在页面上放置了一个视频元素,你就可以访问视频设置.如果无法看到设置,请双击视频元素或选择它并按enter键以调出设置。粘贴在URL你的视频,点击enter,你的视频缩略图将出现在视频元素。

在左侧,视频设置显示一个URL输入字段和一个显示所有设置按钮。右边是rick Astley的歌曲“Never gonna give you up”的YouTube预览,标题和段落元素如下。
支持视频来源
  • YouTube(如果你想对你的YouTube视频有更多的控制,可以尝试使用YouTube视频元素
  • Vimeo
  • DailyMotion网站
  • KickStarter(只需要粘贴主活动URL,我们将获得主活动视频)
  • 泰德(多语言支持)
  • Wistia
  • Ustream
  • 转播画面
  • 抽搐
  • 土豆网
  • Hulu
  • SproutVideo
如果你的视频源不能正常工作,请让我们知道我们会尝试添加它!
必须知道
目前,上传自己的视频文件到资产面板不支持在video元素中使用它们。但是,你可以无声上传视频背景视频

设置视频尺寸

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

三个视频容器,包含视频预览、标题和段落元素。

如果您想自定义视频的宽度和高度,您可以创建一个自定义div块.为此,从元素面板中拖拽一个div块。给它一个宽度值,另一个高度值。现在如果你拖动视频到这个自定义div块,它会符合这个大小。

在左边的第一步,输入640像素为宽度,360像素为高度。步骤二在右边,拖动视频到div块,以取代占位符。

探索视频元素

在Webflow中添加视频到你的项目还有其他方法:

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

YouTube视频元素

YouTube视频元素可以让你从YouTube的URL嵌入视频,并提供了YouTube的嵌入功能提供的所有显示选项,包括从一个频道显示相关视频,设置特定的开始时间,显示或隐藏视频控制,等等。了解更多关于YouTube视频元素

YouTube设置面板显示URL的文本输入字段,Start at。三个复选框的静音,自动播放和显示播放器控制下的播放部分。两个复选框的隐私模式和限制相关视频到同一频道下的隐私部分和一个显示所有设置按钮。

背景视频组件

背景视频组件可以让您添加无音频的运动背景。与只支持Youtube和Vimeo链接的视频元素不同,背景视频元素可以接受你上传的任何视频文件。了解更多关于背景视频组件的信息

背景视频设置面板显示“视频上传”按钮和“显示所有设置”按钮。

Lightbox元素

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

灯箱设置面板显示一个图像或视频链接的按钮和一个与其他灯箱链接的复选框。

富文本元素和富文本字段

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

富文本元素栏显示一个按钮,用于图像、视频、自定义代码、富媒体和项目符号或编号列表。

当然,您也可以使用Video元素从集合中提取数据视频领域

嵌入视频使用自定义代码

还可以使用嵌入元素。

  1. 添加一个嵌入元素添加到页面
  2. 粘贴你的视频代码HTML5视频入门
  3. 保存
尝试Webflow——它是免费的
Baidu
map