2023/7/28
ページの構成が変わって埋め込み出来るようになっていたので改訂版を作成
luke24e-2h.hatenablog.com
-----------------------------------------------
以下旧資料
bilibili動画のリンクを作成します
bilibili動画は埋込コードも提供されています
しかしhttpsとhttpが混在する混合コンテンツ(Mixed Content)のため上手く埋め込まれたように表示されますがプレーヤが起動しません
仕方がないのボックスを作ってリンクを貼ることにしました
- bilibili動画リソース取得
下図にリソース取得ポイントを記入しました
図中リンクと追記した矢印の所にマウスポインタを持っていくとリンクページがポップアップします
ページのURLと埋込コードはそれぞれボタンを押すとコピーされます
サムネイル画像ファイルはQQ空間をクリックすると表示されるポップアップページ内の画像です
この画像のURLを取得します
URL
https://www.bilibili.com/video/av69334068/
埋込コード
<iframe src="//player.bilibili.com/player.html?aid=69334068&cid=120163952&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
サムネイルURL
http://i1.hdslb.com/bfs/archive/173d6515e98ce24c223785a988c6c5ef0ba36260.png
- bilibili動画ボックスリンクHTML〜サムネイルに画像ファイルリンクを使う
<fieldset class="linkbox_fieldset"> <legend>bilibili動画リンク</legend> <a class="linkbox_a_tag" href="https://www.bilibili.com/video/av69334068/">【圈9】瓷都浪漫 guitar.ver【自改编】 <img class="linkbox_img" src="http://i1.hdslb.com/bfs/archive/173d6515e98ce24c223785a988c6c5ef0ba36260.png" alt="瓷都浪漫" /> </a> </fieldset>
- bilibili動画ボックスリンクHTML〜サムネイルに埋込プレーヤを使うがプレーヤ起動はキャンセル
<fieldset class="linkbox_fieldset"> <legend>bilibili動画リンク</legend> <a class="linkbox_a_tag" href="https://www.bilibili.com/video/av69334068/">【圈9】瓷都浪漫 guitar.ver【自改编】 <iframe class="linkbox_bilibili" src="//player.bilibili.com/player.html?aid=69334068&cid=120163952&page=1" frameborder="no" scrolling="no" allowfullscreen="true"> </iframe> </a> </fieldset>
- css〜上記いずれも共通で使える
/* style for my linkbox */ .linkbox_fieldset{padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin-bottom: 10px; border: 1px solid #D0C0C8; width: 100%; height: 150px; max-width: 500px; background-color: #fcfcfc;} .linkbox_a_tag{display: flex; align: text-top; font-size: larger; border-bottom: 0px solid #333;} .linkbox_img{margin-left: auto; height: 100px;} .linkbox_bilibili{margin-left: auto; width: 200px; height: 120px; pointer-events: none;}
ブログのデザイン設定・カスタマイズ・{}デザインCSSに追記するかHTMLにstyleタグで入れ込みます
このcssのポイントは
・a tagのアンダーラインが text-decoration:none; で消えない場合 -> border-bottom: 0px にする
今使っているテーマではリンクのアンダーラインが消えなかったと言うかアンダーラインじゃなかった
・bilibili動画プレーヤが起動するので pointer-events: none; で無効にする
完成
