html - 如果大小不同,如何使 YouTube 嵌入式视频和背景图片一起响应?

标签 html css youtube responsive-design embed

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

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

我现在面临的问题是,当调整浏览器大小时,它们不会一起调整大小并且变得错位。有人建议可以在视频的左侧和右侧使用两个单独的图像,但我已经尝试了几种方法,但都不起作用...

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

scroll left

scroll right

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

最佳答案

真的老兄,你应该多考虑一下你的布局,无论如何做你想做的就是代码:

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%;
}

关于html - 如果大小不同,如何使 YouTube 嵌入式视频和背景图片一起响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17486300/

相关文章:

javascript - 如何从 Youtube 播放 MP4 视频?

Javascript文件如何不显示API key

html - html5中nav的CSS错位

javascript - 在 HTML5/CSS/Js 中绘制水平和垂直线的最便宜的方法是什么?

javascript - 如何动态自动缩小iframe高度?

带有起始索引的 HTML 嵌套编号列表

youtube - 如何在 Youtube 上获取我的 channel 列表?

jquery - 当表格单元格太长时,有什么方法可以减少表格单元格中的文本?

javascript - 使用 jQuery 在单击时切换元素

html - 如何使用 Angular 在新选项卡中打开链接?