如何根据设备大小操作iframe CSS [英] How to manipulate the iframe css based on device size
问题描述
我正在建立该网站，但无法根据设备的尺寸来操纵iframe。基本上，我想要的是如果在平板电脑上使用视频是一种尺寸，但是例如，如果用户在移动设备（如手机）上，则建议使用其他尺寸，使其小于平板电脑或台式机窗口的尺寸。
I'm building this site and I'm having trouble manipulating the iframe based on size of the device. Basically, what I want is if the use is on a tablet the video is one size but for example if the user is on a mobile device like a cell phone it is other size recommended it be smaller that the tablet or desktop window size. if any of that makes since.
我曾经尝试过使用div，但是我可能实现了错误，但是从我的研究来看，我对此表示怀疑。我还在CSS中针对该设备尺寸制作了一个iframe，并为所有设备使用了默认的iframe。
I've tried using div's but I may have implemented then wrong but from all I researched I doubt it. I also made an iframe in the CSS just for that device size and had a default iframe for all devices.
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
.center{
width: 300px;
height: 100px;
position: fixed;
left: 48.5%;
top: 44%;
transform: translate(-50%,-50%);
}
iframe {
border:none;
overflow:hidden;
width: 500px;
height: 250px;
frameborder="0";
allowTransparency="true";
allowFullScreen="true";
}
}
iframe {
border:none;
overflow:hidden;
width: 1000px;
height: 500px;
frameborder="0";
allowTransparency="true";
allowFullScreen="true";
}
<!DOCTYPE html>
<html lang="en">
<p align="center">
<!--stackoverflow trying to get the videos to shrink when using mobile devices. need to be done for "ipad" and cell phones from my knowledge computers are fine. -->
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560">
</iframe>
</p>
<p align="center">
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FTimeOutForMeInc%2Fvideos%2F526931557744638%2F&show_text=0&width=267" >
</iframe>
</p>
</body>
</html>
推荐答案
试试看：
.embed-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
<div class='embed-container'><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560"></iframe></div>
这篇关于如何根据设备大小操作iframe CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
