typecho文章挂载bilibili视频响应式代码
打开bilibili的某个视频，然后如上图找到嵌入代码
<iframe src="//player.bilibili.com/player.html?aid=58238094&cid=101596459&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
然后在给iframe 这个标签添加 class="iframe_video" iframe_video这个类名
CSS
/*视频挂载*/.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}
