Question

Heey，

我想弄清楚如何将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

如果我帮助你，请在评论中告诉我们：）

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

Div中的Youtube iframe与背景卡在图像响应

2 个答案: