函数学习 有些事,记下来是不错的选择...

引用bilibili视频

哔哩哔哩是支持视频分享,效果不是很理想,可以用以下方式改善,效果参见文末,在functions.php添加以下方法,

    /*视频挂载*/
    
    .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
    }

复制B站的视频分享嵌入代码

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

修改一下复制的嵌入代码,然后在iframe 标签添加 class="iframe_video"属性,参见修改后的代码:

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=6537114&bvid=BV1ss411b76y&cid=10634813&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"> </iframe>

修改后效果:

标签:height,screen,min-width,max-width
输出:89字,阅读时长 ≈ 1分钟
上一篇:WSL 2之Windows和Linux间的文件操作
下一篇:Markdown编辑器的基本语法

发表评论