Question

我正在建立该站点，但无法根据设备大小来操纵iframe。基本上，我想要的是，如果在平板电脑上使用视频是一种尺寸，但是例如，如果用户在移动设备（如手机）上，则建议使用其他尺寸，使其小于平板电脑或台式机窗口的尺寸。如果有，那么。

我曾尝试使用div，但可能实现了错误，但是从我的研究来看，我对此表示怀疑。我还针对该设备尺寸在CSS中创建了一个iframe，并为所有设备设置了默认iframe。

@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>

Answer 1

尝试一下：

.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>

more detail

如何根据设备大小来操作iframe css

1 个答案: