BloggerにYouTubeを埋め込む二つの方法はどちらを選ぶべきか

Bloggerはウェブの編集から動画挿入によってYouTubeを検索して動画を取り込むことができる。

便利だと思ってマイケル・ジャクソンの記事で初めて使ってみたら記事ではサムネイルになって横幅320pxで表示されてしまう。スマホならば画面に収まって良いかも知れない。ちょっと両端が途切れるのは悲しいけれどもパソコンのウェブバージョンでもサムネイルのままになっている。小さ過ぎるのではないか。YouTubeの埋め込みコードを使うと微妙に異なっていてスマホではサムネイルだけれどもパソコンのウェブバージョンでは普通に表示されていた。BloggerでYouTubeを埋め込む方法は二つあってどちらが良いかと考えてしまうYouTubeの埋め込みコードは一般的にはそのままで使うとスマホの画面からはみ出すことが多くてレスポンシブに対応するCSSを追加せずに済むのは有り難いと思う。画面幅に自動的に合わせるようにすると記事に所定のCSSへの割り振りを追加しなくてはならないので、そこが凄く悩ましいけど、しかしBloggerでやらなくても済むならば二つの方法のどちらかで選ぶべきだろう。パソコンのウェブバージョンに合わせたサイズでYouTubeの埋め込みコードを使ってスマホではサムネイルという形にすると画面からはみ出さないように記事へレスポンシブに対応するCSSのクラスを個別に割り振って記載する必要もなくて楽だと思う。ところがやってみると全てのYouTubeの動画がサムネイルに自動的に変換されるわけではないと気付いた。ウェブバージョンに合わせて載せるとスマホではみ出してしまう恐れがあるからウェブの投稿で動画挿入を使うしかなくなった。すると辛いのはウェブバージョンでもサムネイルで小さ過ぎるからCSSで大きく表示するように設定できれば良いと思う。@media screen and (min-width:768px) {.post-body iframe {min-width:560px;min-height:315px;}}通常、Bloggerはタブレットからウェブバージョンにリダイレクトされるので、それ以上の画面幅に「@media screen and」から「min-width」の「768px」と限定して記事のYouTubeの動画を「post-body」のクラスの「iframe」からメインのカラムと同じくらいまで「560px」と「315px」で縦横に大きく出すことができた。YouTubeの動画はiframeタグで取り込まれてiframeタグにデザインを付けるとそれが使われた他のコンテンツにも影響するかも知れないから注意しなくてはならない。なので「min-width」と「min-height」の縦横の最小幅で調節している。YouTubeの動画は横長で良いと思うけど、サイズを普通に合わせるとiframeタグで他の縦長のコンテンツが来たら上下に縮んでしまう可能性がある。最小幅で調節しておくとそれよりも大きなものへは影響しなくて済む。iframeタグは表示するサイズの比率が保てないというか、コンテンツそのものへのデザインではないので、サイトでの枠付けしか決められないから画面幅にコンテンツを様々に合わせるのは難しくなる。横長でも縦長でも全てが収まるようなサイズにしておかないとデザインが崩れ兼ねないし、さもなければCSSをコンテンツに個別に記載するしかないだろう。ブログのウェブバージョンでYouTubeを動画挿入でも埋め込みコードを使ったのと同じようにサイズを大きく表示することができた。スマホでサムネイルになって再生画面はオリジナルに等しいものの最初から両端が途切れないで欲しかったけれどもサイズは固定されているようで、Blogger独自にトリミングされていてYouTubeの動画の画面比が合わなかったりすれば周りが部分的に切り捨てられるのではないか。ただし機種によっては両端が残っている場合も確認されたし、必ずしも全てのスマホで悲しくはないと思うので、せめても救われる。

コメント