,可以通过以下步骤实现:
<div>
元素和CSS的display: flex
属性来实现。HTML代码示例:
<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>
CSS代码示例:
.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;
}
HTML代码示例:
<div class="tab-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/视频ID" frameborder="0" allowfullscreen></iframe>
</div>
将上述代码中的视频ID
替换为实际的Youtube视频ID即可。
这样,选项卡式内容框中居中显示嵌入的Youtube视频就完成了。用户可以通过点击选项卡切换不同的内容,其中一个选项卡中显示嵌入的Youtube视频。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云