也想出现在这里?联系我们

WordPress 文章内嵌入B站视频自适应

2024.01.09 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress文章中嵌入B站(哔哩哔哩)视频并使其自适应,你可以使用B站提供的嵌入代码以及一些自定义CSS样式。以下是步骤:

  1. 获取B站视频嵌入代码:
    前往B站网站,找到你想要嵌入的视频。
    在视频页面下方找到"分享"按钮,然后点击它。
    在分享选项中,选择“嵌入”(Embed)。
    复制嵌入代码,这通常是一段HTML代码,类似于:

     
  2. 在WordPress文章中插入嵌入代码:
    登录你的WordPress后台。
    创建一个新的文章或编辑现有文章。
    切换到“文本”编辑模式,这样你可以粘贴HTML代码。

  3. 添加自适应样式:
    为了使嵌入的B站视频自适应,你可以添加一些自定义CSS样式。你可以在WordPress主题的自定义CSS选项中添加以下样式,或者使用一个自定义CSS插件。

    / 让iframe元素自适应父容器的宽度 /
    iframe {
       width: 100%;
    }
    
    / 可选:设置最大高度以防止视频高度过大 /
    iframe {
       maxheight: 500px; / 你可以根据需要调整高度 /
    }
  4. 保存文章。

  5. 预览或发布文章,你将看到B站视频嵌入到文章中,并且会根据容器的宽度自动调整大小。

这样做后,你的B站视频应该会在WordPress文章中自适应容器的宽度,并在不同设备上呈现良好。如果你对自定义CSS不太熟悉,可以请一个WordPress开发者或设计师来协助你。另外,请确保你的WordPress主题没有覆盖上述样式,以免发生冲突。

有用0
  • 2024.01.09初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧