twitter-bootstrap embed-responsive并不总是有效
twitter-bootstrap是一个流行的前端开发框架，而embed-responsive是其中的一个组件。它用于创建响应式的嵌入式内容，例如视频、地图或其他媒体。
embed-responsive组件的作用是使嵌入式内容能够根据屏幕大小自动调整大小，以适应不同的设备和屏幕分辨率。它通过添加CSS类来实现这一功能。
embed-responsive组件有以下几个主要特点和优势：
- 响应式设计：embed-responsive组件可以根据设备的屏幕大小自动调整嵌入式内容的大小，确保内容在不同设备上都能良好地显示。
- 简单易用：使用embed-responsive组件可以很方便地将嵌入式内容添加到网页中，并且不需要编写复杂的自适应代码。
- 跨浏览器兼容性：embed-responsive组件经过充分测试，可以在主流的现代浏览器上正常工作，确保用户在不同浏览器上都能正常浏览和使用嵌入式内容。
embed-responsive组件适用于以下场景：
- 嵌入式视频：可以使用embed-responsive组件将视频嵌入到网页中，并确保视频在不同设备上都能正常播放和显示。
- 嵌入式地图：可以使用embed-responsive组件将地图嵌入到网页中，并确保地图在不同设备上都能正确显示，并且用户可以进行交互操作。
- 嵌入式音频：可以使用embed-responsive组件将音频嵌入到网页中，并确保音频在不同设备上都能正常播放和显示。
腾讯云提供了一系列与前端开发相关的产品和服务，其中包括云服务器、云存储、云数据库等。您可以通过访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用方式。
相关·内容
3回答
我有一个问题，我的反应，嵌入式youtube，我有两个视频并排。它看起来很好，直到屏幕大小是可移动的。它们不是互相堆叠在一起，而是缩小成小盒子，就像在这张照片里一样。
这是我的页面，在上
页面顶部的HTML代码：
<h1>References</h1>
<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class
浏览 2提问于2017-07-23得票数 3
回答已采纳
我有下面的代码为响应式YouTube视频，但它根本不显示。当我删除这些类时，视频会显示出来，但是它的宽度很短。是托管它的站点。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo get_field( "youtube_video" );?>" frameborder="0" allowful
浏览 0提问于2017-02-22得票数 0
回答已采纳
1回答
当调整大小时，我正在尝试移除我的iframe下面的空白。我主要是使用引导用于CSS。目标是让iframe 100%的页面在肚脐下面。
我就是这样称呼iframe的：
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="site/index.html">
<p>Your browser does not support iframes.</p>
浏览 1提问于2018-07-01得票数 0
回答已采纳
2回答
<div class="col-sm-24 embed-responsive">
<iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe>
</div> .embed-responsive iframe {
height: 185px;
margin-top: -4%;
padding-left: 7.5px;
pa
浏览 25提问于2019-12-17得票数 1
回答已采纳
2回答
如果水平卷轴总是隐藏的
、、、
我的Iframe的水平滚动总是隐藏，但我想看到它滚动-x在我的网页。我不明白为什么滚动-x从来没有出现过？滚动-y确实出现，但不是水平的。
有什么建议吗？
<div class="row">
<div class="col-sm-8 col-sm-push-4">
<div class="embed-responsive embed-responsive-4by3">
<iframe class
浏览 4提问于2016-05-02得票数 0
回答已采纳
我正在iframe中嵌入一个链接：
<div class="container hidden" id="timeline" style="position: relative;">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-
浏览 16提问于2017-07-01得票数 1
回答已采纳
1回答
尝试找出为什么这个frame
在横向模式下无法在Ipad上渲染
我能看到的css是
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
关于如何将其扩展为显示整个框架，有什么想法吗
浏览 0提问于2016-04-08得票数 0
1回答
嵌入的视频不会调整到容器div的大小。我已经编辑了CSS并最终使海报图像缩放正确，但现在视频在左侧和右侧分别裁剪了大约50px。
我是不是错过了HTML5中的视频容器？你能帮我检查一下我的标记和样式吗？
.blog-side {
position: relative;
}
.wrapper {
margin: 0 auto;
}
.videowrapper {
width: 100%;
height: auto;
text-align: center;
浏览 4提问于2019-01-28得票数 1
在embed元素上使用Bootstrap 3如果使用‘embed-responsive 16by9’它可以正常工作。但是如果我使用“embed-responsive 21by9”，它就不能工作了！为什么？我怎么才能修复它？
这是可行的：
<div class="embed-responsive embed-responsive-16by9" >
<div id="map_detail" class="map embed-responsive-item" ></div>
</div>
这不起作
浏览 0提问于2017-04-09得票数 2
3回答
我正在开发一个响应式的网页使用bootstrap框架，我想把一个响应式的iframe。
bootstrap文档说我可以使用下面的命令设置一个响应式的16x9宽高比iframe
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
而css (包含在bootstrap.css中)是
.embed-responsive
{
浏览 2提问于2014-07-18得票数 6
1回答
我试图将视频嵌入到页面上，但它们显示的都是拉伸的视频。这是应该是什么样子和这就是它现在的样子。
以下是我的嵌入代码：
<iframe width="100%" src="https://www.youtube.com/embed/Fj5O0V9WWug?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
..。但是，看起来默认的css可能会扰乱比例。
.embed-responsive-16by
浏览 0提问于2018-02-27得票数 0
回答已采纳
所以我使用的是bootstrap的embed-responsive结构，它包含一个带有embed-responsive类的包装器&一个用于定义纵横比的附加类&带有embed-responsive-item类的子元素。问题是它适用于canvas，但是当我将它初始化为fabric.Canvas时，它就崩溃了。 <div class="embed-responsive embed-responsive-16by9">
<canvas id="popupEditorCanvas" class="embed-responsi
浏览 21提问于2019-06-26得票数 1
回答已采纳
我正在使用一个名为Wistia (wistia.com)的嵌入式视频。我的目标是对视频进行懒散加载，但是有一个依赖项需要随附脚本一起加载。在Click上，脚本被附加到页面的头部。然而，需要额外的点击来播放视频。
如何将依赖项加载到头部，然后立即开始播放视频而不需要附加的单击？
var xhr = new XMLHttpRequest();
var baseUrl = "https://fast.wistia.com/oembed/?url=";
var accountUrl = encodeURIComponent("https://home.wistia.com/
浏览 7提问于2021-11-01得票数 0
哦，天哪，这真令人沮丧。我一直以为我知道我的方法，HTML和CSS，但这是我的疯狂！
我有一个空白的黑色HTML页面只包含一个16:9的iframe与id“内容”。
在这个iframe视频和照片的16:9的纵横比将显示给用户(这将是一个离线应用程序运行在火狐，有点像一个原始媒体播放器)。
iframe内部的所有内容(相当精细的多媒体体验)都很好，除了空白索引页面上的"player“iframe的放置/维度！
它需要垂直居中，宽度为100%，这样就可以接触到浏览器窗口的两侧，
当浏览器窗口调整大小时，它需要响应，但当然需要保持其纵横比，
而且最重要的是，它必须始终是完全可见的！意思是我不
浏览 5提问于2014-10-29得票数 0
回答已采纳
2回答
我只是注意到我的代码中处理用户故事发布的一部分并没有以它应该的方式工作。
每当用户在他的帖子(示例YouTube嵌入视频)中有iframe时，我的<div class="embed-responsive embed-responsive-16by9">脚本将iframe包装在一个类似于下面的div中。
我使用的代码很简单：
$content = str_replace(['<iframe', '</iframe>'], ['<div class="embed-responsive embed-r
浏览 0提问于2018-01-20得票数 1
1回答
对于我的网站，我正在使用uncss删除未使用的引导-css。但是在我的导航中有两个元素--引导旋转木马幻灯片动画和一个活动状态，它们在uncss生成新css-文件后不能正常工作。
来了我的秘密-忽略
ignore: [
".tab",
".tab-content",
".tab-pane",
".fade",
".fade.in",
".collapse",
".collapse.in",
".collapsin
浏览 0提问于2015-12-22得票数 0
2回答
我正在尝试嵌入多个Vimeo视频响应性地放在一边和下面。当我使用embed-responsive时，当我使用几个不同的视频时，视频的位置往往会略有不同。但是，当我在所有div中使用相同的视频时，它们完全一致。
以下是我的代码
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 gallery"
浏览 2提问于2018-06-04得票数 1
我有一个使用bootstrap 4主题的Drupal站点。我有一个Bootstrap卡，我想在里面添加一个视频。下面是我的代码：
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullsc
浏览 32提问于2021-05-21得票数 0
这是我的页面：
我希望页面元素在桌面上以这种方式显示：
在移动设备上：
这是HTML代码：
<div class="page-section">
<div class="container">
<div class="row mb-5">
<div id="youtube_ifram" class="embed-responsive embed-responsive-16by9"><iframe src="htt
浏览 0提问于2018-11-04得票数 1
1回答
我跟踪了文档并研究了其他问题，但不知道为什么不起作用。
以下是代码：
<div class="row">
<div class="col">
<h3 class="text-center text-primary py-3 text-uppercase">Our Twitch Streamers</h3>
<div class="embed-responsive">
浏览 0提问于2018-02-23得票数 3
回答已采纳
2回答
查看我的HTML代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloud
浏览 4提问于2018-01-15得票数 0
回答已采纳
我已经阅读了很多帖子，并尝试了所有方法来使iframe响应并保持16:9的比率……这不是很糟糕，但视频仍然在youtube的框架中被裁剪。 bootstrap 5的诀窍是什么？ <div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
<iframe class="embed-responsive" title="YouTube video player" src="{{ $
浏览 74提问于2021-07-10得票数 2
1回答
我好像不能让我的药片在小屏幕上工作。它们可以在普通屏幕上很好地标记内容，但一旦我将屏幕变小，这些药丸就无法点击。
我不知道问题出在哪里。
另外，如果我只有药丸，那么它就会拉出标签，但一旦它进入容器，它就不会拉出标签。
<div class="container-fluid">
<div class="row" style="margin-top: 1em; border: 2px dashed lightgreen">
<div class="col-md-8"
浏览 0提问于2016-06-17得票数 0
我的设置
我在引导Rails中编辑了.col-lg-4，并在导入语句之后将它们包含在我的custom.css.scss文件中，以包含零填充。
问题
我需要覆盖。嵌入式响应视频在引导css，以没有一个宽度属性，并设置填充为零。通过手动导入引导文件，我成功地找到了一个临时解决方案，但我仍然希望使用引导sass，并覆盖这些属性。
但是，它们似乎并没有在Custom.css.scss文件中重写它们。
混合行为 (Custom.css.scss)
问题是，如果我导入引导-链轮和引导，它似乎忽略了我的css，我不能设置我需要设置的，正如上面提到的。
@import "bootstrap-sproc
浏览 1提问于2015-10-07得票数 0
我正在做一个项目，在这个项目中，我需要把一个视频剪辑放在背景图像的特定部分(视频应该总是在手机屏幕上)。背景是有反应的，并且不断变化。如何确保包含视频的视频始终保持在相同的相对位置？
CSS：
.main{
background-image: url("../images/moshe.jpg");
background-attachment:fixed;
background-position: center center;
background-size: cover;
height: auto;
left: 0;
min-height: 100%;
min-width:
浏览 5提问于2015-04-04得票数 2
回答已采纳
1回答
我有一个iframe，视频播放时，用户选择。所有的东西都在我的网站上，但我想隐藏推荐给用户，所以他们不知道在哪个网页的视频是。我正在尝试使用referrerpolicy=的“非引用程序”，但是火狐不起作用，在chrome中运行得很好。有人知道为什么会发生这样的事吗？
<iframe class="embed-responsive video" id="myvideo" src="" referrerpolicy="no-referrer"
scrolling="no"></iframe>
浏览 5提问于2022-08-13得票数 0
3回答
是否可以在bootstrap中设置基础架构的大小？
我将iframe设置如下：
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
我试着将最大高度设置为450像素：
.embed-responsive {
max-height:450px;
}
这完全没有效果。你能给我一个提示吗，怎样才能实现一个更小但仍有响
浏览 2提问于2014-12-10得票数 13
Summernote textarea使用以下代码将YouTube URL转换为<iframe>：
$video = $('<iframe>')
.attr('src', '//www.youtube.com/embed/' + youtubeId)
.attr('width', '640').attr('height', '360');
它将YouTube URL转换为：
<iframe src="//www.y
浏览 3提问于2016-03-26得票数 0
回答已采纳
2回答
我把拼凑在一起，我对视觉效果很满意。目标是制作一个集中响应的视频iframe。
但是我一直想不出一个好的方法来增加1920 of的最大宽度。如果你有一个完整的高清视频，它将是很好的不让它去任何更大。
如果我的CSS可以改进，不要犹豫。
<div class="container">
<div class="embed-responsive">
<iframe width="640" height="360" src="https://player.vimeo.com/
浏览 1提问于2018-06-06得票数 0
回答已采纳
总的来说，我对rails和编码非常陌生，但我试图在我的观点中写一些东西:如果有一个与提案相关的视频，应该显示到该视频的链接(在你的管道上)。如果没有视频，那么就会显示一个确认没有视频的通知。在我的video_proposal模式中有一个布尔值，如果是真的，那么我想显示到视频的链接。
我认为我没有正确地将引导和rails结合起来。我不确定问题是否是我在按钮中引用video_tag的方式。
我做了以下工作：
<% if @project.video_proposal %>
<button type="button" <%= vide
浏览 2提问于2015-01-23得票数 0
回答已采纳
我正在尝试将播客嵌入到我的flask网站中，我想我正在使用bootstrap。当我使用bootstrap嵌入时。这是用于嵌入的代码： <div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-
浏览 18提问于2020-10-17得票数 0
我有一段视频显示在这样的页面上
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{skin url="video/hande.mp4"}}"></iframe>
</div>
但是当在平板/移动设备上加载页面时，页面会自动跳转到视频所在的底部。我试着添加这样的东西
<iframe style="display: none;&
浏览 2提问于2015-11-04得票数 2
回答已采纳
我已经使用bootstrap来响应视频，但问题是我只有2个大小
class="embed-responsive embed-responsive-16by9"
和
class="embed-responsive embed-responsive-4by3"
它们真的很大。如果我尝试这样做，如何手动更改宽度和高度
style="width:400px ; height:400px"
视频已调整大小，但响应式视频不起作用。请帮帮我。
这是我的代码
<div align="center" class="embed-r
浏览 2提问于2015-01-24得票数 9
回答已采纳
要为YouTube视频制作一个响应式的4x3视频嵌入，Bootstrap网站说要这样做：
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item youtube" src="…"></iframe>
</div>
但我希望视频的最大宽度是400px。所以我定义了一个类：
.youtube {
max-width: 400px;
max-height: 300
浏览 2提问于2016-01-24得票数 4
1回答
我正在尝试将Grafana面板嵌入到我的网站中，并且在如何使我的iframes适合我的iframes中，而不是在很大的利润率(见附件屏幕截图)方面遇到了问题。
我的html是：
<p class="fs-1 fw-bold" id="internalSensors_1">
Internal Beehive Sensors
</p>
</div>
<div class="row">
<!-- Internal temperature from Grafana--&g
浏览 5提问于2022-03-11得票数 0
5回答
以下代码运行良好，除了YouTube播放器的大小。我不能把它调整到我想要的大小。
我尝试将width="150"和height="100"放入iframe中，但什么也没发生。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/q6xWV-uDl5E?autoplay=1"
浏览 1提问于2017-11-23得票数 0
我的代码如下： <div class="modal fade right" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-side modal-bottom-right">
<div class="modal-content"
浏览 21提问于2019-12-17得票数 0
回答已采纳
1回答
我正在使用技术使iframe (视频)响应。基本上，iframe绝对定位在一个100%宽度的包装器元素中。包装器元素具有基于视频的纵横比的填充集：
.embed-responsive {
position: relative;
/* video height / video width */
padding-bottom: 56.2%;
height: 0;
overflow: hidden;
}
.embed-responsive iframe {
position: absolute;
top: 0;
left: 0;
浏览 3提问于2014-02-08得票数 6
回答已采纳
4回答
我有一个屏幕截图，如下所示，我必须复制在引导4。
上面的截图基本上是一个视频，下拉菜单位于最右上角的。
我用来放置视频的代码是：
第一代码：
<header class="container border masthead_video text-white text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="htt
浏览 0提问于2018-07-03得票数 1
回答已采纳
1回答
我想在我的一个popovers里面添加一个短视频。我尝试过以下几种方法： let htmlString = `
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="..." loop muted></video>
</div>
`;
$('#popover').popover({
浏览 33提问于2019-10-16得票数 0
回答已采纳
我正在尝试使用angular am创建标签。我尝试在chrome.Referered中使用这些代码，并在代码中包含这些文件
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.2.0/angular.min.js"> </script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootst
浏览 1提问于2014-11-27得票数 0
1回答
在移动视图中，图像和嵌入式video.There之间存在差距，这是没有问题的。
<div class="section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6"><div class="embed-responsive embed-responsive-16by9">
<img class="
浏览 0提问于2016-11-07得票数 0
回答已采纳
<div align="center" class="embed-responsive embed-responsive-16by9">
<video controls class="embed-responsive-item">
<source src="~/AspxCommon/vids/mySearch.mp4" type=video/mp4>
</video>
</div>
这段代码在Chrome中运行完美，然而，由于某种原因，当点
浏览 0提问于2017-06-24得票数 1
我的问题很简单，我想在1行中放置4个按钮，它在PC上工作，但在电话中不工作： <div class="container">
<div class="row text-center">
<div class="col-lg-12 col-md-12 col-xs-12">
<button class="btn btn-theme">Scores</button>
<button class="btn btn-th
浏览 110提问于2020-11-03得票数 0
1回答
自举下拉式按键
、、
我有一个工作下拉显示，它显示在一个文本框，但希望它总是显示在键盘上。我有keyup函数工作，但您仍然需要点击后，键入，以使下拉显示。
//This calls the delay function and will result in the customerNameUL_Populate function being called after the delay has passed.
function customerNameSearchTextbox_keyup() {
delay(function (
浏览 0提问于2016-11-19得票数 1
回答已采纳
1回答
我有一个疑问，我似乎不知道如何解决，基本上我有一个视频，这是我的网站的视频，我想要的是，在视频开始播放之前显示一个图像，这样我就可以防止用户在开始视频之前看到那个循环，如果有连接问题，图像总是显示。
目前我有这样的想法：
<section class="tp-banner-container content_section">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="vid
浏览 0提问于2017-03-19得票数 0
1回答
从响应视频引导4中删除黑色边框
、、、、
我想删除一个视频的黑色边框，并保持它的响应。我用的是靴带4.5。我也想保留我的视频的全景分辨率，1920x764。我几乎可以肯定，这个问题与决议有关。然后我应该编辑引导.css文件吗？
<body>
<!-- Video -->
<!-- XLG/LG - 21:9 aspect ratio -->
<div class="d-none d-lg-block embed-responsive embed-responsive-21by9 cab-video">
<video class
浏览 9提问于2020-06-20得票数 1
回答已采纳
1回答
我有一个div，它包含一个iFrame：
<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscree
浏览 0提问于2018-07-05得票数 1
回答已采纳
3回答
这个问题已经问了很多版本，但我找不到太多涉及多个视频和Bootstrap标签的内容。
我需要的是一个给定的球员暂停时，另一个选项卡被点击。
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"
浏览 4提问于2014-10-01得票数 0
1回答
我有个假象：
....
<div style="height:500px;width:500px;background:black" class="embed-responsive">
<iframe src="widget.html" width="100%" height="100%" class="embed-responsive-item" allowfullscreen webkitallowfullscreen mozallowfullscre
浏览 0提问于2019-03-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
