Div中的Youtube Iframe，背景卡在图像响应上

Question

---

嘿嘿，

我正在尝试弄清楚如何将 youtube iframe 定位在背景的右侧，这样看起来就像是在笔记本电脑上播放 youtube。 然后根据不同分辨率的背景图像相应缩小。

网站以 html 代码 100% 的宽度运行

    <div class=youtube>
    <div class=youtubesmaller>
     <iframe width="100%" src="https://www.youtube.com/embed/videoseries?             list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_" 
   frameborder="0" allowfullscreen></iframe>
    </div>
    </div>

从我注意到它没有随背景缩放的那一刻起，css 就是。

 /*music page stuf*/

 .youtube {
     background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
     background-size: auto;
     background-repeat: no-repeat;
     background-position: right;
     height: 600px;
 }
 .youtubesmaller {
     width: 51.2%;
     margin-left: 37.4%;
 }
 /*end music page stuff*/

一开始我试图给 iframe 一个背景，但后来读到这是不可能的。

website page

Answer 1

我不会为您提供完整的解决方案，但我希望无论如何我都可以帮助您。

像这样更改代码：

.youtubesmaller {
margin-top: 63px;
width: 713px;
height: 446px;
margin-left: 161px;
}

.youtube {
background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
height: 600px;
width: 1034px;
float: right;
}

在 youtube iframe 中将高度更改为 100% (style="height: 100%;")。

如果你想缩放它 - 在 CSS 上查看屏幕分辨率 - CLICK HERE

如果我帮助了你，请在评论中告诉我:)

Answer 2

这是我按照您的要求让它工作的方法。

首先我将设置的高度和宽度添加到您的 iframe：

<iframe width="714px" height="450px" src="https://www.youtube.com/embed/videoseries?list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_" frameborder="0" allowfullscreen="" style=""></iframe>

然后以像素为单位设置包装器的宽度（此结果不会响应，但我注意到您没有响应页面）。我还添加了浮动右侧和相对位置：

.youtube {
    background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right;
    height: 600px;
    ***width: 1039px;
    float: right;
    position: relative;***
}

然后我将内部 div 绝对定位在适当的位置：

.youtubesmaller {
    position: absolute;
    top: 63px;
    left: 165px;
}

我在您的网站上的浏览器检查器中正确执行了此操作，这是结果的屏幕截图：http://screencast.com/t/hgJkgbQktF