我建议在您的设计中删除类grid，并将width:100%添加到类.u-align__wrapper中，因为我观察到.u-align__wrapper类包含width:100vw。

这是完整的预览。

null

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1536px;
  padding-bottom: 24px;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

.grid {
  display: grid;
  flex-wrap: nowrap;
  grid-gap: 16px;
  grid-template-columns: repeat(12,1fr);
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
  margin: 0 -8px;
  padding-left: 0;
}

.article__layout {
  grid-column: 2/9;
  width: auto;
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
}

.video-player.u-align--full-width {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: 32px;
    position: relative;
    width: 100vw;
    height: auto;
    padding-bottom:56.25%;
    padding-bottom: 0;
}

.u-align__wrapper {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    grid-column: 1/7;
    align-items: center;
    /* display: flex; */
    grid-column: 1/-1;
    justify-content: center;
    vertical-align: middle;
}

.video-player__source.u-align__container {
  left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  height: 100%;
}

<div class="container">
  <div class="">
    <div class="article__layout">
      <div>
        <div class="article-body-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis imperdiet.</p>
          
<!-- VIDEO BLOCK START -->
          
        <div>
          <div class="alignBodyVideoPlayer">
            <div clas="video-player u-align--full-width">
              <div class="u-align__wrapper">
                <iframe class="video-player__source u-align__container" width="640" height="360" src="https://www.youtube.com/embed/C0DPdy98e4c">
                </iframe>
               </div>                      
             </div>
           </div>
         </div>
          
<!-- VIDEO BLOCK END -->
          
          
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis imperdiet.</p>           
        </div>
      </div>
    </div>
  </div>
</div>

如果你去掉“position:relative；”样式，然后添加“position:relative；”到您的父div，即'.container'类。然后视频将是全宽全高。