お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

[覚書]ブログにYOUTUBE動画を貼り付けるときに目一杯大きく表示する方法(RESPONSIVELY対応にする方法)

WEBデザイン
ブログにYOUTUBE動画を貼り付ける時「目一杯大きく表示したい」かつ、「モバイル端末で表示した時にも画面からはみ出さないようレスポンシブにしたい」

それを解決するには…

スポンサーリンク

http://embedresponsively.com/にアクセスして動画のURLを貼り付けると、コードを生成してくれるので、そのコードをコピペると

サイズを可変にして(RESPONSIVELY対応)枠内目いっぱいに表示してくれるようになります。

画質の荒い動画だとかえって見難くなると思いますが、最近の動画は高画質なものも多くなりましたので、できるだけ大きく表示したいケースが多いですね。

こんな感じ

コード <style><!-- .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } --></style> <div class='embed-container'> <iframe src='https://www.youtube.com/embed/dyb46AXtNPQ' frameborder='0' allowfullscreen></iframe> </div> ※注意点

これで生成されるコードにはコメントアウトの<!-- -->が付加されていないので、入れておきましょう(※コメントアウトしておかないとOGP表示などのときにコードが表示されてしまう)

動画を複数貼り付けるときは、スタイル部分は一度だけの記述で良いので、後半の<div>~</div>の部分だけ列記すればOK

(動画のURL[https://www.youtube.com/watch?v=********]の********の部分を上記コードの赤字部分と入れ替えるだけでOKですね。)

動画の途中から再生したい場合はこちら

※その後、YOUTUBEから提供される埋め込みコードが改正されたようです。

YOUTUBEの画面上で右クリックして出てくる「埋め込みコード」をコピーしてそのまま貼り付けるだけで、画面一杯のサイズに自動的になるようですので、上記サービスを利用する必要はもうないですね。。。

コメント