【问题标题】:How to make a YouTube embedded video and background image responsive together if they are different sizes?如果尺寸不同,如何使 YouTube 嵌入视频和背景图像一起响应?
【发布时间】:2013-07-03 09:42:18
【问题描述】:

我已经实现了一个经过调整的解决方案,我 found here

在我有here的客户的开发网站上

我现在面临的问题是,当调整浏览器的大小时,它们不会一起调整大小并且会错位。有人建议可能在视频的左侧和右侧使用两个单独的图像,但我尝试了一些不起作用的东西......

可能的解决方案的图像是:

和

有人愿意帮助我找到可行的解决方案吗?这个想法是视频是中间的实际“滚动”,并与滚动边缘(左右)一起调整大小,但我似乎无法让它工作。提前非常感谢!

【问题讨论】:

  • 一些想法:你可以使用弹性视频技巧:webdesignerwall.com/tutorials/css-elastic-videos。您可以使用容器上的 :after 和 :before 伪元素作为背景图像插入的图像。使用background-size: contain;,它们将被缩放。可能会有所帮助。
  • 感谢您的帮助! Vinícius 提供的答案对我有用 - 不过,我很感谢您花时间发表评论! :)

标签: html css youtube responsive-design embed


【解决方案1】:

真的,伙计,你应该多考虑一下你的布局,不管怎样,这里的代码就是你想做的:

CSS

.video-container {
    position: relative;
    padding-bottom: 42%;
    padding-top: 15%;
    height: 0;
    overflow: hidden;
    height: 0;
    overflow: hidden;
    width: 75%;
    max-width: 800px;
    margin: 0 12.5%;
}

【讨论】:

  • 我还在学习。 :) 非常感谢你,维尼修斯!!该代码完美运行! :D
  • Muito muito muito obrigada! ;)
猜你喜欢
  • 1970-01-01
  • 2020-09-06
  • 1970-01-01
  • 2018-11-14
  • 2012-04-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多