bilibili動画埋め込み 改訂版

埋め込みが出来るようになっていたので改訂版

１．詳細

https://player.bilibili.com

２．ID取得

動画のページをブラウザで開いて
①マウスカーソルを合わせると貼り付け用ポップアップが表示される
②水色のボタンを押すとクリップボードにIDがコピーされる

３．HTML
１）コピーされたID
　【【圈9】瓷都浪漫 guitar.ver【自改编】】 https://www.bilibili.com/video/BV1GE411R7Z6/?share_source=copy_web

　BV1GE411R7Z6 が bvid

２）iframe
 HTML編集で下記コードの bvid を変更して好きな場所に貼り付ける

<p class="iframe-bilibili">
	<iframe src="//player.bilibili.com/player.html?bvid=BV1GE411R7Z6" scrolling="no" border="0" frameborder="no" 	framespacing="0" allowfullscreen="true"></iframe>
<p>

３）style 例

.iframe-bilibili {
	position: relative;
	width: 640px;
	height: 360px;
	box-shadow: 0 0 8px #e5e9ef;       
}
@supports (aspect-ratio: 16 / 9) {
	.iframe-bilibili {
		max-width: 720px;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;     
	}
}
.iframe-bilibili iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

４．完成

【圈9】亲爱的旅人啊【千与千寻】