この投稿では、Googleブログで、この埋め込みプレーヤーが動作することをテストしています。テストしてみたところ、動作しました。
この埋め込みコードの特長は、動画の選択ができることです。Googleブログの様々の場面で、利用することができます。
上下にボタンがありますが、現在、動作するのは、「履歴からの選択」ボタンのみです。このボタンで、動画を選択することができます。
埋め込み方法
以下のリンクをクリックすると、埋め込みコードが表示されますので、そのコードをコピーペーストすれば、プレーヤーが動作します。
vidを直接打ち込むには
以下の埋め込みコードの中の、&vid=Tr8zD5RQKSYを探し、そこのvid=を変更
することで、別の動画を再生できます。動画コードは、youtubeの検索ページで探すことができます。
<div id="pp" class="ui-draggable ui-draggable-handle" style="height:auto;width: 240px; margin-top: 0.5%; margin-left: 0.5%; background-color: lightcoral; border: solid; z-index: 5; position: relative; top: 0px; left: 0px;">
<button id="select_video" style="font-size: 0.8em; font-weight: bold; color: white; background-color: darkgreen;">サムネイルの選択</button><button id="none_disp" style="font-size: 0.8em; font-weight: bold; color: white; background-color: blue;">非表示</button><br />
<div id="s_frame" style="height:170px;border: 'solid';">
<iframe id="thumbnail_player" style="display: block;" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" title="" width="240" height="200" src="https://iframe.tecoyan.net/index_thumbnail_player_single_embeded.php?direct=direct&title=&vid=Tr8zD5RQKSY#bodybg">
</iframe></div>
<button id="rireki_video" style="font-size: 0.8em; font-weight: bold; color: white; background-color: darkgreen;">履歴からの選択</button><button id="reserve" style="font-size: 0.8em; font-weight: bold; color: white; background-color: blue;">予備ボタン</button>
</div>
<script type="text/javascript" src="https://iframe.tecoyan.net/js/thumbnail_player_single_embeded_parent.js"></script>
