*
*
*

備忘録 – WordPressでユーチューブの動画を中央に配置し、伸縮自在にする方法 –

 WordPressに限りませんが、WEB上でユーチューブの動画を中央に配置し、WEBを視聴するデバイスの大きさが、スマートフォン、タブレット、PCと変化したとき、デバイスの大きさに応じて自由に伸縮する方法です。
 下記のようなスタイルシートを書きます。

 #post .capture {
 margin: 10px 10px 10px 10px;
 text-align: center;
 font-style: italic;
 }

 #post .video {
 margin: 10px 10px 20px 10px;
 text-align: center;
 }

 iframe {
 max-width:560px;
 width: 100%;
 }

 上記のスタイルシートで、タイトルと動画を囲みます。
 WEBへの動画の埋め込みコードは、ユーチューブの「共有」「埋め込みコード」のリンクをクリツクして、あらかじめ取得しておきます。

 <!– タイトル –>
 <div class=”capture”>Blade Runner – Opening Titles (HQ)</div>
 <!– 動画 –>
 <div class=”video”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-fu7jN2_2pE” frameborder=”0″ allow=”autoplay; encrypted-media”  allowfullscreen></iframe></div>

 これでOKです。ユーチューブで取得した埋め込みコードは、手を加えずにそのまま使います。

 ちなみにこの動画は、映画「ブレードランナー」のオープニングです。
 未来都市の情景が、大変幻想的です。

Opening scene – ‘Blade Runner’ (HD)

最近のニュース・トピックス

カテゴリー

アーカイブ


  • 後援会の代表者
    行政書士・マンション管理士・社会保険労務士
    ファイナンシャル・アドバイザー
    徳田 賢一
  •  政策への賛同者が一体になることで大きなうねりを引き起こし、党派にとらわれない新しい大きな波を市政に伝えることができるようになることを期待します。
     入会は無料です。無党派層の方たちも含め、共有可能な目標にむかって、共に歩みを進めていただければ幸いです。
     入会していただいた方には、不定期になりますが、政策に関連したニュース、トピックス等を発信させていただきます。
  • 後援会への入会申込ページ
  • 入会申込書(PDF)ダウンロード

ページトップへ