你好,
我想弄清楚如何将 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 提供背景,但后来发现这是不可能的。
最佳答案
我不会为您提供完整的解决方案,但我希望我能帮到您。
像这样更改代码:
.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
如果我帮助了你,请在评论中告诉我 :)
关于html - Div 中的 Youtube Iframe,背景卡在图像响应上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39129705/