最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 如何在WordPress文章中嵌入视频 在WordPress博客文章嵌入视频,可以丰富网站的内容,增加用户参与度的好方法。WordPress对主流的视频网站YouTube,Vimeo,Facebook,Twitter等兼容良好,可以直接嵌入视频。 本教程主要针对WordPress初学者,展示如何将视频嵌入WordPress博客文章,页面和侧边栏小部件中。 9月 22, 2020 498 0

    在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中为视频添加延迟加载

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » 如何在WordPress文章中嵌入视频 在WordPress博客文章嵌入视频,可以丰富网站的内容,增加用户参与度的好方法。WordPress对主流的视频网站YouTube,Vimeo,Facebook,Twitter等兼容良好,可以直接嵌入视频。 本教程主要针对WordPress初学者,展示如何将视频嵌入WordPress博客文章,页面和侧边栏小部件中。 9月 22, 2020 498 0

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 84会员总数(位)
    • 10552资源总数(个)
    • 68本周发布(个)
    • 0 今日发布(个)
    • 402稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情