在选项卡式内容框中居中显示嵌入的Youtube视频

<div class="tab-container">
  <div class="tab">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div class="tab-content">
      <!-- 嵌入的Youtube视频将显示在这里 -->
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Tab 2</label>
    <div class="tab-content">
      <!-- 其他内容 -->
    </div>
  </div>
  <!-- 添加更多选项卡 -->
</div>

.tab-container {
  display: flex;
  justify-content: center;
}

.tab {
  flex: 1;
  text-align: center;
}

.tab input[type="radio"] {
  display: none;
}

.tab label {
  display: block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-content {
  display: none;
  padding: 20px;
  background-color: #f9f9f9;
}

.tab input[type="radio"]:checked + label {
  background-color: #fff;
}

.tab input[type="radio"]:checked ~ .tab-content {
  display: block;
}

<div class="tab-content">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/视频ID" frameborder="0" allowfullscreen></iframe>
</div>