草庐IT

带有响应式引导、Vimeo 嵌入和 WordPress 主题的 CSS 1 px 边框

codeneng 2023-03-28 原文

CSS 1 px border with responsive bootstrap, Vimeo embed, and WordPress theme

我在使用 Vimeo 在我的 WordPress 主题中嵌入视频时遇到问题。显示视频嵌入左侧的 Vimeo 背景的 1px 边框(在 Chrome 中)。 Bootstrap 也是用这个主题实现的。

基本上，当嵌入 Vimeo iframe 时，它??会在左侧显示一个非常细的黑色边框，这是其 iframe 的 Vimeo 默认背景。我们有白色背景，因此在某些页面上非常明显。如果您查看源代码，则基本嵌入是：

1
   <iframe src="http://player.vimeo.com/video/64685575" width="940" height="528" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframex>

但实际的嵌入要复杂得多，并且会在其上添加引导流样式等。我尝试检查所有元素并对其进行编辑，但无法弄清楚。有这个问题的页面的一个很好的例子是：http://www.universityoffashion.com/disciplines/fashion-art/

这个答案不正确。 .player .video-wrapper 位于加载到 iframe 的 HTML 文档中，因此 !important 什么都不做，因为 iframe 从字面上加载了框架内的不同网页，这绝不会受到本地 CSS 的影响。在过去的一年里，Vimeo 上有多个关于这个问题的报告，而且它们基本上没有响应。

我的解决方案是把我的 iframe 放在一个 div 中，位置：absolute，top：0，left：0，width：100%。该宽度是 div 父级的 100%，在我的情况下，它受到响应式布局中列宽的限制。这实际上有效，与之前标记为正确的答案不同。

这是对我有用的代码，
you must put this in the div which has the iframe inside:

1
2
3
4
5
6
position: relative;
top: 0;
left: 0;
width: 100%;
border: 5px solid gold;
box-sizing: initial;

我的解决方法是将 iframe 的宽度和高度扩展为顶部和左侧 2px。之后，将 iframe 集中在容器package器中。

package器隐藏了溢出，然后，1px 边框消失了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Embed iframe wrapper */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16 x 9 */
}

/* Vimeo/Youtube Iframe */
.embed-responsive iframe{
  position: absolute;
  bottom: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我尝试在 iframe 标记中使用内联 css，它可以正常工作并且响应速度也很好。

1
<iframe ..... style="border:1px solid;"></iframex>

您需要更改视频package div 的背景颜色。具有类视频package器的 div 具有 #000 的背景。将其更改为#fff。

以下是 player.css 中第 2 行的代码。

1
2
3
4
5
6
.player .video-wrapper {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    position: absolute;
    width: 100%;
}

替换为：

1
2
3
4
5
 .player .video-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
position: absolute;
width: 100%;

}

  • 我实际上无法更改 .player .video-wrapper {} 因为它作为 Vimeo 的一部分包含在 iframe 中。我不控制那个 CSS 文件，所以它不能被改变。还有其他一些东西使它脱离了我的 1px 它与响应式行流体有关：before :after 我认为。如果您缩小浏览器窗口，黑线实际上会换边。
  • 您可以将其写入正在加载的 css 文件中。只需添加代码并编写 !important 即可。

WordPressVimeospanclasssectioncssiframetwitter-bootstrapvimeowordpress

有关带有响应式引导、Vimeo 嵌入和 WordPress 主题的 CSS 1 px 边框的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. ruby-on-rails - 带有 Zeus 的 RSpec 3.1，我应该在 spec_helper 中要求 'rspec/rails' 吗？ - 2

    使用rspec-rails3.0+，测试设置分为spec_helper和rails_helper我注意到生成的spec_helper不需要'rspec/rails'。这会导致zeus崩溃:spec_helper.rb:5:in`':undefinedmethod`configure'forRSpec:Module(NoMethodError)对thisissue最常见的回应是需要'rspec/rails'。但这是否会破坏仅使用spec_helper拆分rails规范和PORO规范的全部目的？或者这无关紧要，因为Zeus无论如何都会预加载Rails？我应该在我的spec_helper中做

  5. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  6. Ruby:如何使用带有散列的 'send' 方法调用方法？ - 2

    假设我有一个类A，里面有一些方法。假设stringmethodName是这些方法之一，我已经知道我想给它什么参数。它们在散列中{'param1'=>value1,'param2'=>value2}所以我有:params={'param1'=>value1,'param2'=>value2}a=A.new()a.send(methodName,value1,value2)#callmethodnamewithbothparams我希望能够通过传递我的哈希以某种方式调用该方法。这可能吗？ 最佳答案 确保methodName是一个符号，而

  7. ruby-on-rails - 带有 Pry 的 Rails 控制台 - 2

    当我进入Rails控制台时，我已将pry设置为加载代替irb。我找不到该页面或不记得如何将其恢复为默认行为，因为它似乎干扰了我的Rubymine调试器。有什么建议吗？ 最佳答案 我刚发现问题，pry-railsgem。忘记了它的目的是让“railsconsole”打开pry。 关于ruby-on-rails-带有Pry的Rails控制台，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/question

  8. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

  9. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  10. ruby-on-rails - 在 Ruby 或 Rails 中，hash.merge({ :order => 'asc' }) can return a new hash with a new key. 什么可以返回带有已删除键的新散列？ - 2

    在Ruby(或Rails)中，我们可以做到new_params=params.merge({:order=>'asc'})现在new_params是一个带有添加键:order的散列。但是是否有一行可以返回带有已删除key的散列？线路new_params=params.delete(:order)不会工作，因为delete方法返回值，仅此而已。我们必须分3步完成吗？tmp_params=paramstmp_params.delete(:order)returntmp_params有没有更好的方法？因为我想做一个new_params=(params[:order].blank?||para

随机推荐