这是一个测试handsome中加入b站内嵌播放器的页面

妹红口也薯条.jpg

来源：BV1B54y1R7uq

可以看到，经过一系列设置之后，可以将b站内嵌播放器插入到博客中。

番剧也可以添加吗？具体添加方法？

https://www.bilibili.com/video/BV1xp4y1x7Sk

  1. 首先，需要将上面的视频内嵌代码从视频下的“分享”中复制过来，如果是视频就直接粘贴到博客，同时在自定义css中插入以下样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    .iframe_video {
        position: relative;
        width: 100%;
    }

    @media only screen and (max-width: 767px) {
        .iframe_video {
            height: 15em;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .iframe_video {
            height: 20em;
        }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .iframe_video {
            height: 30em;
        }
    }

    @media only screen and (min-width: 1200px) {
        .iframe_video {
            height: 40em;
        }
    }

    .iframe_cross {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%
    }

    .iframe_cross iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0
    }

  2. 视频直接粘贴即可引入相应视频；

  3. 如果想插入番剧，先找到番剧那一集对印的BV号，再进入BV转av页面，获取av号（aid）;

  4. 之后将上面的内嵌代码对应的bv和aid(av)号修改即可（cid应该不用管）；

  5. 内嵌代码：

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

  6. 如果想要实现播放器其他功能，可以在给iframe 这个标签添加 class=”iframe_video” iframe_video这个类名。如下：

    1
    <iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=971163886&bvid=BV1xp4y1x7Sk&cid=244362085&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

  7. 插入效果：

  8. （带有class标签的）；

  9. （没有class标签的）；

看起来都是可以的呢~