Bootstrap |包含一个16:9视频和一些文本的两列
在使用 Bootstrap 创建一个包含 16:9 视频和一些文本的两列布局时，你可以利用 Bootstrap 的网格系统和嵌入式响应式工具类来实现。以下是一个示例，展示了如何实现这个布局。
步骤 1：引入 Bootstrap
首先，确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件。你可以通过 CDN 引入：
html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 16:9 Video and Text</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容将放在这里 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>步骤 2：创建两列布局
使用 Bootstrap 的网格系统创建一个两列布局，其中一列包含 16:9 视频，另一列包含一些文本。
html复制<div class="container mt-5">
<div class="row">
<!-- 视频列 -->
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>
</div>
<!-- 文本列 -->
<div class="col-md-6">
<h2>视频标题</h2>
<p>这是一些描述视频的文本。你可以在这里添加更多的信息，解释视频的内容或提供相关的背景信息。</p>
<p>你还可以添加更多的段落、列表或其他 HTML 元素来丰富文本内容。</p>
</div>
</div>
</div>完整示例
以下是完整的 HTML 代码示例：
html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 16:9 Video and Text</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<!-- 视频列 -->
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>
</div>
<!-- 文本列 -->
<div class="col-md-6">
<h2>视频标题</h2>
<p>这是一些描述视频的文本。你可以在这里添加更多的信息，解释视频的内容或提供相关的背景信息。</p>
<p>你还可以添加更多的段落、列表或其他 HTML 元素来丰富文本内容。</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>相关·内容
我想用Bootstrap来实现这样的功能：| | Some | ||--------------------|------| v width 100% (screen width)
我可以用视频创建两个容器，保持16/9
浏览 12提问于2017-08-21得票数 0
1回答
嵌入的视频不会调整到容器div的大小。我已经编辑了CSS并最终使海报图像缩放正确，但现在视频在左侧和右侧分别裁剪了大约50px。"> <div class="row">
浏览 4提问于2019-01-28得票数 1
我已经使用bootstrap来响应视频，但问题是我只有2个大小和style="width:400px ; height:400px"
浏览 2提问于2015-01-24得票数 9
回答已采纳
我需要一行包含图像、嵌入式视频和一些文本。站点使用引导带进行响应行为，但是，当页面宽度减小时，该行中的对象不应堆叠。对于第一列中的图像，当页面的宽度减小时，第二列中的嵌入式视频在调整大小时会出现问题。可见，随着页面宽度的减小和第一列中的行高小于图像的高度，第二列中的嵌入式<e
浏览 1提问于2020-04-04得票数 0
回答已采纳
1回答
我对我的网站有一个想法，那就是做一些像这样的东西：
我已经有了所有其他HTML/CSS明智的工作。我目前(使用bootstrap)有一行和两列，包含图像的列只是一个带有背景图像的div，而另一列</e
浏览 8提问于2019-07-09得票数 0
回答已采纳
1回答
我使用的引导带4的响应嵌入式视频功能，它的工作只是好的视频，但不缩放控制(暂停，播放等)。这些控件只是不能扩展，还是代码中遗漏了什么？
浏览 3提问于2020-10-30得票数 0
所以我在使用flexbox中的Bootstrap响应式嵌入类时遇到了一个问题。当堆叠东西时，这些类工作得很好，但是如果我使用flexbox并排放置两个div(一个包含视频，另一个是文本信息面板)，视频会移动到半宽(这是正确的)，但高度仍然是全高，就像它是全宽一样。我似乎没有改变什么，就是让高度与由flexbox的宽度变化控制的比率保持一致。 这是响应式嵌入中<em
浏览 25提问于2019-01-22得票数 1
我试图在Bootstrap 4中使用两列构建一个视频播放器，一列包含视频，另一列包含带有缩略图和标题的行。我遇到的问题是，行没有填充其父列的垂直空间。使用flexbox helper类创建一个正确的列来填充垂直空间的正确方式是什么，而不管项目有多少？或者在<
浏览 6提问于2018-05-03得票数 3
回答已采纳
2回答
我正在尝试在node.js express路由的前端工作中使用Bootstrap和Foundation。我想知道Bootstrap是否有办法拥有与Foundation相同的Flex视频功能(据我所知，它是根据屏幕尺寸自动调整大小的功能)？编辑:关于Peter Wooster的回答，如果有一个解决方案可以在没有框架的情况下轻松完成，那么为什么人们对Flex-Video如此大惊小怪呢？
浏览 0提问于2014-06-29得票数 5
回答已采纳
我在Bootstrap 4中有两列，一列有视频，另一列有文本或其他类型的内容：#video-meta-content { height: 500px; padding: 0;}
<link href="https://stackpath.bootstrapcdn.com/boo
浏览 1提问于2018-05-07得票数 0
回答已采纳
我有一个两列的行，其中一行包含一些文本，以保持它的高度和大小与窗口大小无关，而另一列--包含视频--随着窗口大小而缩小和拉伸。我是一个CSS的初学者，没有一个更好的想法如何通过阅读相关的答案在这里。
这是HTML。我没有为视频设置高度或宽度，因为我希望它是可
浏览 6提问于2021-01-17得票数 0
4回答
我需要在框架中嵌入一个HTML页面，并使用以下代码： vspace="0" hspace="0">
我正在尝试将高度设置为自动，以便框架自动调整到页面长度，而不必像我在这里所做的那样对高
浏览 0提问于2013-03-07得票数 16
回答已采纳
我有一个尺寸为960x720(宽径比为4:3)的视频，我有一个1920年x 1080 (宽比16:9)的显示器。我要把视频拉长--不尊重它原来的纵横比--这样它就能填满整个显示器。请注意，我并不打算裁剪视频。
如何从命令行对单个视频(即不作为所有播放的视频的一般设置)进行操作？
浏览 0提问于2016-01-17得票数 7
回答已采纳
3回答
我需要创建一个网站(两列)，其中一列包含一些文本(垂直居中)，另一列包含图片(粘性到底部)。
两者都需要响应(所以位置:固定不是图像的一个选项)。我试图通过使用Bootstrap和w3响应框架来实现这一点。但是，他们两人似乎都无法将一个反应灵敏的图像放在一个总是粘在底部<em
浏览 12提问于2017-07-30得票数 2
回答已采纳
1回答
我试图得到一个特定ReplayID的最高产量单位。然而，在一些，但不是全部，我的结果，它并没有实际显示最高的价值。11013348 Phoenix 9 911013348 Immortal6 9
浏览 0提问于2019-08-08得票数 1
回答已采纳
1回答
我正在使用Rails构建一个聊天客户端和服务器。我已经选择使用Bootstrap作为前端。然而，我的HTML和CSS的技能是非常有限的，我有麻烦创建聊天布局，我的目标是类似skype的东西。这是我想要达到的目标的一个模拟。
干杯
浏览 2提问于2013-10-30得票数 1
我正在写一个小程序，将标准清晰度4:3的视频转换成16:9的高清视频，我正在经历一个严重的拉伸效果，正如我所预期的那样(尽管直到我的代码开始工作我才考虑到这一点)。不管怎么说，我唯一能想到的办法就是把图像的顶部和底部剪掉，这样我就可以绕过这种拉伸效果，同时仍然填满整个16:9的屏幕。1)所以我
浏览 4提问于2009-02-10得票数 0
回答已采纳
1回答
使用Bootstrap V5.0框架，我想创建一个包含圆形图像和一些内容的div。我知道如何使用50%的半径来创建一个圆，但我不知道如何使div的高度与宽度相匹配，所以我总是得到一个椭圆形。我想让div包含图像成为一个带有背景颜色的圆圈。如何在不同尺寸的显示器上使高度始终与宽度相同，以便获得正确的圆圈？
浏览 27提问于2021-04-20得票数 0
1回答
编辑:我现在使用视频的行和列来代替我的网站(只是更简单！)但如果有人知道这个问题的答案，我仍然很好奇:) 我一直在学习如何使用Bootstrap设计网站，我有一个可以播放一些硬编码视频的旋转木马。这在很大程度上是有效的，除了他们都在同一时间比赛的事实，我不确定如何让他们停止这样做。我希望每个视频都能自动播放，但前提是用户正在看包含</em
浏览 12提问于2020-12-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
