Post date: Sep 7, 2016 2:54:18 PM
jimdoでなにげにYoutubeから動画を埋め込むと、関連動画を表示してしまいました。どうも普通の方法では、関連動画の表示を消せそうにありません。
そこで、HTMLウィジェットからiframe タグを利用して表示させることにしました。幸い、Youtubeには埋め込みコードを自動生成する機能がありますのでとても楽ちんに出来ます。
ではでは。Youtubeに動画を上げて準備が出来たら、まず動画を再生してみましょう。
Youtubeのサイトで行うこと
共有 → 埋め込みコード → もっと見る とクリックしていきます。
動画が終わったら関連動画を表示する の前にあるチェックをクリックして外します。
動画のサイズを好みの大きさに変更することも出来ます。
さて、以上の作業が終わったら、上の<iframe・・・・・・></iframe>部分をすべて選択してコピーしておきます。
Jimdoの編集ページで行う事
動画を挿入したい場所で コンテンツを追加 をクリック
・・・その他のコンテンツ&アドオン をクリック
</> ウィジェットHTML をクリックして追加しておきます
テキストを書きこむ部分に、先ほどコピーした内容を貼り付けて → 保存 をクリック
これで、動画を貼り付けることが出来ました。
注意点は、貼り付けるエリアの大きさよりも、動画のサイズを小さくしておくことです。
表示させてみて、一部しか表示されないなら、Youtubeでコードをコピーするときに動画サイズを小さくしましょう。
重要なテクニック
<iframe width="560" height="315" src="https://www.youtube.com/embed/KShi0FV2i9k?rel=0" frameborder="0" allowfullscreen></iframe>
上の部分で width=" ・・・" height="・・・" の部分を削除すれば挿入する場所いっぱいの画像になります。どちらか一方だけ記述すると縦横比を保ってサイズ変更が出来ます。
コピーした文章を貼り付けて<iframe ・・・・></iframe>の前後に、次のように追加すれば真ん中寄せが出来ます。
<div align="ceter"><iframe ・・・・></iframe></div>
center の代わりに left とか right とかも使えます。
結構大雑把にやってもいけるもんですね。Jimdoをお使いの方はぜひ試してみてください。
自分のページに実際に大昔に作ったVideoを貼り付けてみました。サンプルは以下の通り。関連動画が表示されずに止まりますね。
http://f-planning.jimdo.com/%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB/?logout=1