極意(29)YouTube一覧表示
YouTube動画を縮小して同一ページに一覧表示する方法です。
それには3段の段組機能を併用していますが、haikテーマとそれ以前のQHMでは、その段組設定が異なります。今回、その辺の違いを明らかにしてみました。
haikテーマで表現した場合
青い車
ロビンソン
魔法のコトバ
上記のおまじないです。
#cols{{ 青い車 #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/5K8ZuLYG0yo" frameborder="0" allowfullscreen></iframe>) ==== ロビンソン #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/51CH3dPaWXc" frameborder="0" allowfullscreen></iframe>) ==== 魔法のコトバ #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/gPTFyx2R46w" frameborder="0" allowfullscreen></iframe>) }}
解説します。
- 段組は3段均等のカラム指定を使用しています。
- YouTube動画は3分の1に縮小しています。
haikテーマ以前の旧バージョンでは
青い車
ロビンソン
魔法のコトバ
上記のおまじないです。
#style2(style=width:32%;float:left;text-align:left;margin-left:2px;){{ 青い車 #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/5K8ZuLYG0yo" frameborder="0" allowfullscreen></iframe>) }} //------------------------------------------------------------- #style2(style=width:32%;float:left;text-align:left;margin-left:2px;){{ ロビンソン #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/51CH3dPaWXc" frameborder="0" allowfullscreen></iframe>) }} //------------------------------------------------------------- #style2(style=width:32%;float:left;text-align:left;margin-left:2px;){{ 魔法のコトバ #html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/gPTFyx2R46w" frameborder="0" allowfullscreen></iframe>) }} #clear
解説します。
- 段組は#style2指定で3段組を設定しています。
- YouTube動画は3分の1に縮小しています。
段組ではなく「表」を使ったケース
青い車 | ロビンソン | 魔法のコトバ |
---|---|---|
上記のおまじないです。
|STYLE:responsive| |~青い車|~ロビンソン|~魔法のコトバ| |#html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/5K8ZuLYG0yo" frameborder="0" allowfullscreen></iframe>)|#html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/51CH3dPaWXc" frameborder="0" allowfullscreen></iframe>)|#html2(<iframe width="140" height="105" src="https://www.youtube.com/embed/gPTFyx2R46w" frameborder="0" allowfullscreen></iframe>)|
解説します。
- QHMの表指定ならhaikテーマ云々は気にしなくて両方で使用できます。
- YouTube動画は3分の1に縮小しています。
問題点(2015-10-24)
- Ver5.2では、上記3つの動画は全て同じ大きさで表示されていましたが・・・
- Ver6.0になったら、上記のように大きさがバラバラでwidth指定が効かない。
- 原因不明です。メーカーに調査依頼中です。
- 2015/10/24、現在、不具合は解決しました。
Youtube動画の縮小率
元々の動画のサイズは、420x315px でした。それを 140x105px に縮小しました。
数字をみてお分かりかと思いますが、3分の1に縮小しています。
縮小する際には、縦横比を変えないことに注意して下さい。
具体的には、YouTube動画で取得したHTMLタグの埋め込みコード内の以下の部分
「width="420" height="315"」を「width="140" height="105"」に変更して下さい。
Youtube動画を縮小一覧するメリット
- 先ず、縮小したままで動画再生ができるのが嬉しい機能です。
- 再生した後、画面の[YouTube]ボタン押下で標準サイズでも動画が見れます。
- 同じく[全画面]ボタンで文字通り全画面サイズでも動画が見れます。
- 即ち、縮小、標準、全画面の3タイプのサイズで動画が見れることになります。
同じことをWordPressのELEMENTORで実現したら・・・
上記の関連記事はお役に立ちましたか?
- 下記に投票して戴けると嬉しく思います。
ご意見箱