标签: 嵌入视频

  • 如何在WordPress文章中嵌入视频

    在WordPress博客文章嵌入视频,可以丰富网站的内容,增加用户参与度的好方法。WordPress对主流的视频网站YouTube,Vimeo,Facebook,Twitter等兼容良好,可以直接嵌入视频。

    本教程主要针对WordPress初学者,展示如何将视频嵌入WordPress博客文章,页面和侧边栏小部件中。

    WordPress嵌入视频

    如何在WordPress文章和页面中嵌入视频

    WordPress提供强大的自动嵌入功能,该功能支持从流行的视频托管服务(例如YouTube,Vimeo等)中自动获取嵌入代码,您需要做的就是将视频URL粘贴到WordPress编辑器中

    例如,您可以复制要嵌入的视频的YouTube URL。

    接下来,编辑要在其中添加视频的WordPress文章或页面,然后将URL粘贴到内容区域中即可。

    文章嵌入视频

    古腾堡文章嵌入视频

    粘贴视频URL后,WordPress将立即获取嵌入代码并在内容编辑器中显示YouTube视频。

    最后,保存文章或者页面,然后单击“预览”按钮以查看嵌入式视频展示效果。

    WordPress嵌入YouTube视频

    WordPress嵌入YouTube视频

    添加视频后,可以从右侧的块工具栏和“设置”列更改其设置。

    古腾堡编辑器视频块设置

    古腾堡编辑器视频块设置

    您可以调整视频宽度,使其变为全屏,更改对齐方式等等。还可以添加标题并在移动设备上保留视频的长宽比(即实现响应式)。

    WordPress只能对列入白名单的视频服务进行自动嵌入。对于其他网站,您仍然必须获取嵌入代码,然后将其粘贴到博客文章中。

    下面是WordPress官方公布的支持自动嵌入视频服务白名单列表:

    • Amazon
    • Animoto
    • Cloudup
    • CollegeHumor
    • Crowdsignal
    • Dailymotion
    • Facebook
    • Flickr
    • Hulu
    • Imgur
    • Instagram
    • Issuu
    • Kickstarter
    • Meetup.com
    • Mixcloud
    • Reddit
    • ReverbNation
    • Screencast
    • Scribd
    • Slideshare
    • SmugMug
    • Someecards
    • SoundCloud
    • Speaker Deck
    • Spotify
    • TED
    • Tumblr
    • Twitter
    • VideoPress
    • Vimeo
    • WordPress.tv
    • YouTube

    如果要从此列表之外的网站添加视频,则需要该视频的完整HTML嵌入代码。也就是说,国内的优酷视频、腾讯视频、B站视频、爱奇艺视频等,都不能使用自动

    只需复制视频网站提供的HTML代码,然后将其粘贴到编辑器中的“自定义HTML”块中即可。

    customembedcode

    HTML视频嵌入代码

    使用经典编辑器将视频嵌入WordPress

    如果您使用是WordPress经典编辑器,则可以以相同方式嵌入视频。

    只需从YouTube等视频托管服务中复制URL,然后将其粘贴到编辑器中即可。如果使用可视编辑器,则将看到视频的预览。

    经典编辑器嵌入视频

    经典编辑器嵌入视频

    但是,您将无法使用WordPress块编辑器那样的方式进行宽度调整和其他选项设置。如果要修改相关参数,则需要切换到文本编辑器修改代码。

    如何WordPress侧边栏小工具中嵌入视频

    如WordPress页面或文章一样,我们也可以将视频嵌入WordPress边栏小工具中。

    只需转到外观»小工具页面,然后将“文本”小工具添加到侧边栏中。

    在窗口小工具设置内,将视频URL粘贴到内容区域中。WordPress将自动获取嵌入代码并显示视频。

    小工具嵌入视频

    小工具嵌入视频

    不要忘记单击“保存”按钮来保存小工具设置。

    最后,访问网站以查看嵌入在WordPress侧边栏小工具中的视频。

    能否直接上传视频至WordPress网站?

    可以,但是一般不建议这样做,如果你所使用的WordPress网站的服务器配置较低的话。

    因为视频会占用大量服务器资源。如果视频流量巨大,这可能导致网站崩溃。

    我们建议首选使用第三方视频网站作为网站视频存储,比如优酷、B站、腾讯视频等,使用这些视频网站作为视频存储方,还有一个好处就是,可能通过这些网站给你带来流量。

    另外一种网站视频存储方案是,使用CDN服务,比如又拍云、七牛云等CDN服务商;又或者现在十分流行的阿里云的OSS存储、腾讯云的COS存储。

    WordPress视频嵌入插件

    默认情况下,无需使用插件即可将视频嵌入WordPress。但是,我们也可以使用插件来改善网站播放视频用户体验。

    1. Envira Gallery

    Envira Gallery插件

    Envira Gallery插件

    默认情况下,WordPress不附带嵌入式视频库功能。如果要在页面上显示视频库,则需要一个插件来完成。

    Envira Gallery是WordPress最好的多媒体库插件之一。它还带有一个视频插件,支持使用灯箱弹出窗口以创建漂亮的视频库。

    Tips:闪电博的主题将提供混合多媒体智能相册功能,支持发布视频、图片混合相册,且实现文章内容图片及视频自动抽离组成相册。

    2. Lazy Load for Videos

    Lazy Load for Videos插件

    Lazy Load for Videos插件

    视频嵌入了来自外部网站的加载脚本,这对页面加载速度和性能多多少少有一定的影响。

    Lazy Load for Videos通过仅需要页面时加载视频图像来解决此问题。即仅当用户单击播放按钮时,它才会加载嵌入代码。你还可以参考如何《在WordPress中为视频添加延迟加载