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

Question

---

你好，

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

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

    <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

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