你若安好,便是晴天

在博客园中嵌入视频

在博客园中嵌入视频,这里以B站视频为演示。

1. 添加样式

将以下样式放入博客园后台---->设置---->页面定制CSS代码

#cnblogs_post_body .video{
    height: 0;
    padding-bottom: 56.25%;  /* 16:9 */
    position: relative;
    width: 100%;
}

#cnblogs_post_body .video iframe{
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

2. 获取视频

打开B站任意视频---->点击分享---->嵌入代码

<iframe src="//player.bilibili.com/player.html?aid=816641448&bvid=BV1pG4y1n7fD&cid=865834925&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

3. 使用方式

使用Markdown写文章时,添加 <div class="video">嵌入代码</div>

<div class="video">
<iframe src="//player.bilibili.com/player.html?aid=816641448&bvid=BV1pG4y1n7fD&cid=865834925&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

4. 使用效果

posted @ 2022-11-15 13:34  Newbe落花  阅读(34)  评论(0编辑  收藏  举报