次へ

極意（29）YouTube一覧表示

YouTube動画を縮小して同一ページに一覧表示する方法です。
それには３段の段組機能を併用していますが、haikテーマとそれ以前のQHMでは、その段組設定が異なります。今回、その辺の違いを明らかにしてみました。


haikテーマで表現した場合

青い車

ロビンソン

魔法のコトバ



[check]上記のおまじないです。

#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>)
}}

[check]解説します。

  1. 段組は３段均等のカラム指定を使用しています。
  2. YouTube動画は３分の１に縮小しています。


haikテーマ以前の旧バージョンでは

青い車

ロビンソン

魔法のコトバ



[check]上記のおまじないです。

#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

[check]解説します。

  1. 段組は＃style2指定で３段組を設定しています。
  2. YouTube動画は３分の１に縮小しています。


段組ではなく「表」を使ったケース

青い車ロビンソン魔法のコトバ



[check]上記のおまじないです。

|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>)|

[check]解説します。

  1. QHMの表指定ならhaikテーマ云々は気にしなくて両方で使用できます。
  2. YouTube動画は３分の１に縮小しています。

[check]問題点（2015-10-24）

  1. Ver5.2では、上記３つの動画は全て同じ大きさで表示されていましたが・・・
  2. Ver6.0になったら、上記のように大きさがバラバラでwidth指定が効かない。
  3. 原因不明です。メーカーに調査依頼中です。
  4. 2015/10/24、現在、不具合は解決しました。


Youtube動画の縮小率

元々の動画のサイズは、420x315px でした。それを 140x105px に縮小しました。
数字をみてお分かりかと思いますが、３分の１に縮小しています。
縮小する際には、縦横比を変えないことに注意して下さい。
具体的には、YouTube動画で取得したHTMLタグの埋め込みコード内の以下の部分
「width="420" height="315"」を「width="140" height="105"」に変更して下さい。

関連資料：動画の表示サイズについて


Youtube動画を縮小一覧するメリット

  1. 先ず、縮小したままで動画再生ができるのが嬉しい機能です。
  2. 再生した後、画面の[YouTube]ボタン押下で標準サイズでも動画が見れます。
  3. 同じく[全画面]ボタンで文字通り全画面サイズでも動画が見れます。
  4. 即ち、縮小、標準、全画面の３タイプのサイズで動画が見れることになります。


同じことをWordPressのELEMENTORで実現したら・・・



戻る

上記の関連記事はお役に立ちましたか？

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 11  
    役に立たなかった 0  


ご意見箱