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の動画の画面比が合わなかったりすれば周りが部分的に切り捨てられるのではないか。ただし機種によっては両端が残っている場合も確認されたし、必ずしも全てのスマホで悲しくはないと思うので、せめても救われる。

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

コメント

最近の投稿

あわだまで取るビタミンCと重曹が良い感じ

人気の投稿

細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス

宜保愛子は本物の霊能力者だと考えられる三つの真実

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

アドセンスのGDPRに日本でも対応しなくてはならない場合がある

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ

日本人がジャニーズ事務所で行われた性加害よりも恐れていること

Imgurで画像URLと埋め込みコードを取得する方法

沖雅也の涅槃への自殺と双極性障害

生島浩の5:55の心の目に光り輝く尊さ