それを解決するには…
スポンサーリンク
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の画面上で右クリックして出てくる「埋め込みコード」をコピーしてそのまま貼り付けるだけで、画面一杯のサイズに自動的になるようですので、上記サービスを利用する必要はもうないですね。。。
コメント