1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* * YouTube Video 埋め込み * レスポンシブ、幅100%、自動再生、ミュート、ループ再生、縦横比維持 * Embed YouTube Video * Responsive, 100% width, autoplay, mute, loop playback, maintain aspect ratio * Aspect Ratio: 56.25 * 9 / 16 * 100 = 56.25% */ <style type="text/css"> .responsive-video { position: relative; width: 100%; padding-top: 56.25%; } .responsive-video > iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } </style> <div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXX?si=YYYYYYYY&mute=1&autoplay=1&loop=1&playlist=XXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div> |
久しぶりにやろうと思ったら、すっかり忘れていて困った。