【YouTube】サイドバーに貼り付けた動画をきれいに表示させる方法（Blogger）

こんばんは　SAKURAです🌸

ブログにYouTube動画を表示させる方法を二度に渡ってご紹介しましたが、さらなる最適化ということで、大きさの調整を完璧にする方法（当社比）をご紹介します。

ちょっとだけ難しくなりますので、自信のある人だけ試してください。（基本的に自己責任でお願いします）

アスペクト比を保ちながら、動画の大きさを自動調整する

参考にさせていただいたブログがこちら
webclips
Youtubeの埋め込み動画をレスポンシブに対応させる方法
http://design.webclips.jp/youtube-movie-size/

正直、仕組み云々を説明する力量はありません。なんでしょうね。HTMLで書いたコード（ブログラム？）をCSSできれいにレイアウトして見せるってことでしょうか。第１回のYouTubeの動画を埋め込む方法と第2回のサイドバーに貼り付ける方法と、これから説明するHTML&CSSの記述の方法の合わせ技だと理解してください。

HTMLにコードを追加する

前回、ガジェット（コンテンツ）に貼り付けたコードの前に<div class="movie-wrap">を、後ろに</div>を追加します。width="100％”を元の数字に戻します。（100％でもいいと思うけど、最初から100%にする必要がない）


CSSテキスト
このコードはwebclipsさんより引用させていただいております。
写真をクリックするとテキストファイルが表示されます。


<div class="movie-wrap">
<iframe width="480" height="360" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLx3u7aQZvvTIwau6E755AZumQrTXFaVNn" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

なお、説明した動画はアスペクト比4：3なので、width="640" height="480"ですが、アスペクト比16：9の場合は、1280×720、640×360、560×315（初期値）などになります。

CSSを追加する

次に「下をCSSに書き込む」より下のテキストをCSSに追加します。
  1. 「テーマ」の「カスタマイズ」を押す。
  2. 「Bloggerテーマデザイナー」の「上級者向け」をクリック。
  3. スクロースして、一番下の「CSSを追加」を押す。
  4. 「下をCSSに書き込む」よりした下のテキストを貼り付ける。
  5. 右上のブログに適用を押す。
　失敗しても、入力したコードを消せばもとに戻ります。（はずです）

    BloggerデザイナーCSS追加

    動画はサイドバーでしたが、投稿記事にも使えます。HTMLモードで動画のコードの前後に、<div class="movie-wrap">と</div>を追加すればいいです。次回から大きさで悩む必要はなくなります。（参考にさせていただいたブログがこれですね）

    この記事に貼り付けた動画は４：３に設定したCSSを利用して表示しています。『padding-bottom: 75%; /*アスペクト比４:3の場合の縦幅*/』に書き直しています。

    動画内では、アスペクト比16：9のまま設定していますので、両脇に黒いスペースがあります。"movie-wrap"と"movie-wrap２"の２パターンのCSSを追加し、使い分けることで、「１６：９」も「４：３」にも対応できます。

    まあ、ほとんど「１６：９」なので必要もないですが、メリットとがあるとすれば、横幅の制約を受けるスマホ縦で「４：３」のほうが大きい動画になるくらいでしょうか。

    よく動画を張り行ける人は、このコードをテキストファイル形式でドキュメントなどに保存をしておくと便利だと思います。

    (^_^)/~

    コメント

    コメントを投稿

    このブログの人気の投稿

    【Blogger】任意の投稿をTOPに固定する方法

    イメージ
    こんにちは、SAKURAです🌸 まだブログ始めて一ヶ月ちょいですが……。 レイアウトの注目の投稿の設定で、任意の投稿を固定できるみたい。知らなかった。 注目の投稿の設定は以前からあることは知っていましたが、おすすめと、最新記事だけだと思っていました。注目の投稿の選択ってありましたっけ？　検索できたのかなあ？　 固定したいと思って、だいぶググってみたんですけど、初めて気が付きました。 もしかして、テーマをシンプルにしていたせいなのかな？ちなみに今は Emporio です。 周知の事実でしたら、ごめんなさい。 ちょっと前に、ページ機能を使ってホームページみたいな仕様にしたんですけど、入り口を作るのに悩んでました。これなら、Minecraft関連の記事に来てもらいやすくなります。たぶん。 一時的なお知らせなんかにも使えますよね。来月イベントしますから来てくださいとか。 普通の記事だと、投稿する度に下がっちゃいますから。イベントが終われば解除すればいいので。 いろいろ使える機能後思います。 追記、 この1,2ヶ月で、新たな機能が加わったと見るべきか。それとも、もしかしてこれかな？ Blogger Draft を使用する 設定のユーザー設定の『Blogger Draft を使用する』をはいにする。 Blogger Draftとは、Bater版みたいな、Windows10でいう、insider Preview みたいなものでしょうか。 クリボウさんのブログの方に書いてありました。 ” この Blogger in draft では、Blogger に正式採用される前の機能を、自分の Blogger ブログで試すことができます。新機能が部分的に「Blogger」に採用されていく「Blogger beta」と考えれば分かりやすいかもしれません（余計混乱する人は気にしないで下さい）。正式採用前の機能を試せるから、「in draft」と呼ぶようです。投稿した記事が全部下書きになるとか、ブログ初心者のためにお試しブログを提供するとかではないんですね。” クリボウのBlogger Tips『Blogger in draft』より引用 http://www.kuribo.info
    続きを読む

    アナリティクス 知らず知らずのうちに規約違反をしていました

    今回も、ブログ再点検の話題です。 Google アナリティクスの記事を目にしました。 人生フリースタイル Googleアナリティクス利用。あなたも規約違反していませんか！？ http://freestyle-lives.com/archives/193 内容を簡単に紹介すると、アナリティクスに関するプライバシーポリシーを設置する方法です。プライバシーポリシー設置の経緯を読んだとき、身に覚えがある事が書かれていました。 アナリティクスの画面を、キャプチャーすることは規約違反？ Google アナリティクス利用規約 https://www.google.com/analytics/terms/jp.html 皆さんはすでに熟知していらっしゃると思いますが、私はトラッキングIDを取得する最初だけしかみていなくて、何が書いてあったかよく覚えていませんでした。 改めて読むと、４、排他的ライセンスの項目に、次のように禁止事項が書いてあります。 ”お客様は次の行為を行わず、また第三者に次の行為を許可しないものとします。（i）本ソフトウェアまたは付属文書の複製、改変、改作、翻訳。派生物の作成を行うその他の行為。”Googleアナリティクス利用規約から引用 更に、５、機密保持の項目に、相手の同意なくして公開してはいけませんと書いてあります。相手とは、私から見るとGoogleのことです。（Googleから見ると私） 規約や規則は白黒はっきりせず、グレードの領域が多く存在します。 ４、の禁止事項ですが、これは著作権に関連した禁止項目だと思えます。ソフトのプログラムを複製、改変、改作してはいけませんよという意味にではないでしょうか。 「派生物」これがよくわからないです。著作権の関係では、派生著作物（derivative works）となりますので、改作、翻訳を含めた他のソフトウェアや文書を作ることは禁止です、ということになろうかと思います。 キャプチャーすることは、デザインのコピーと考えられるので、禁止項目に該当する可能性が高いと思われます。 ５、機密保持ですが、お互いの機密情報を連絡せずに公開しないことです。分かりやすい例は、私の個人情報（ちょっとニュアンスがちがいますが）を理由もなく、Googleは公表しない。とい
    続きを読む

    【YouTube】ゲーム動画を配信するためのソフト（現在使用しているソフト）

    こんにちは、SAKURAです🌸 ゲーム解説ということで、録画ソフトはWindows10付属のゲームバー。設定にあるやつです。MP4ファイルで記憶されます。トリミング（動画の長さの調整）だけなら、これも付属のXboxアプリでできます。 動画編集ソフトPowerDirector１６ それだけじゃ物足りないと、動画編集ソフトPowerDirector１６を買いました。最初はお試し版をダウンロードして使いました。1本目の動画はお試し版でUPしています。初心者でもなんとかできたので、ちょうど特典があるということで、買ってしまいました。 もう一つ欲しいものがあって、音声合成ソフト。声出しが嫌なんで。 よくあるゆっくりボイスやボイスロイドなど。キャラクターは特にこだわりもないので、棒読みちゃんと CeVIO Creative Studio６（お試し版）を使っています。 棒読みちゃんはゆっくりボイスということで声質が無難。みんなが聞きなれているし、ゆっくりで検索する人もいると思います。 他にもゆっくりボイスがありますが、ダウンロードしたら、ノートンがウイルスが含まれているとして削除しました。 ネットで検索すると、ウイルス対策ソフトを止めなさいとありましたが、それじゃそもそも、ウイルス対策ソフトにお金を出す必要もないわけで、入ってるIntelでも脆弱性があるわけで、まあ今回はノートンを信用したわけです。漁ったのは音声合成ソフトだけじゃなかったですから、○○ソフトはいいけど△△ソフトはだめとか私には判断つきませんので。   CeVIO Creative Studio６（お試し版）の方は、使い勝手はなかなか良かったです。セリフも一括入力でしますし、字幕ファイル（SRTファイル）での出力もできます。 少し字幕とセリフについてお話ししときます。 まず、棒読みちゃんでする場合ですが、 PowerDirectorの字幕機能で、セリフを打ち込んで字幕ファイルを出力します。これは字幕の開始時間と終了時間とセリフの書かれたテキストファイルです。 メモ帳で開いてすぐ保存します。次にワードパッドで開きます。メモ帳でいったん開くのは、 直接ワードパッドで開くと文字化けするからです。 ワードパッドで開いた字幕ファイルのセリフを行単位で選択、コピーし棒読みちゃ
    続きを読む