想在文章中放入视频结果发现放进去是这样的：
(在.md文件里放视频的方法：https://callmelp.online/2021/05/19/markdown/#%E8%A7%86%E9%A2%91)

youtube：

<div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FuKEpOhiVPg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

bilibili：

<div>
    <iframe src="//player.bilibili.com/player.html?aid=672887323&bvid=BV1sU4y187Lv&cid=333761412&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

改进的后效果

原理就是改一下css代码，让div的宽度为100%，然后视频在div里铺开的效果：

youtube:

bilibili:

操作方法

新建css

首先在主题文件夹下source/css里面创建一个video.css的文件，填入：

/*视频适配*/
.video{
    position: relative;
    width: 100%;
    height: 0;              /*高度设置这里无效，设置为0，用padding撑开div*/
    padding-bottom: 75%;    /*68%到80%都可以*/
}
.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

主题配置里引入css

打开主题的配置文件，搜索inject：

我们在head一栏增加下面的内容：

- <link rel="stylesheet" href="/css/video.css">

插入视频

接下来就可以在.md文件里插入适应屏幕视频了：

<div class="video">        //注意这里的div里要设置class
    <iframe src="//player.bilibili.com/player.html?aid=18316187&bvid=BV1tW411q7KM&cid=40592634&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>