youtube 自動縮放語法

<div class="video-container">

  <iframe

    src="https://www.youtube.com/embed/your-video-id"

    frameborder="0"

    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

    allowfullscreen

  ></iframe>

</div>

your-video-id 這邊改成 youtube那邊的ID

 

 

後台CSS裡面加入以下

 

.video-container {

  position: relative;

  padding-bottom: 56.25%; /* 16:9 的長寬比 */

  height: 0;

  overflow: hidden;

}

 

.video-container iframe,

.video-container object,

.video-container embed {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}