响应式 Web 设计 - 视频(Video)

使用width属性

   如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：

	
		
		 
		 
		
	
	
		
		
调整浏览器窗口大小查看视频播放器变化
	

    注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。

使用 max-width 属性

   如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：

	
		
		 
		 
		
	
	
		
		
调整浏览器窗口大小，在宽度小于 400px 时，查看视频播放器的变化。
	

在网页中添加视频

   我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域：

	
		
		 
		 
		
	
	
		

			
Chania
		

		

			

				

					
The Flight
					
The City
					
The Island
					
The Food
				
			

			

			
The City
				
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
				
			

			

				

					
What?
					
Chania is a city on the island of Crete.
					
Where?
					
Crete is a Greek island in the Mediterranean Sea.
					
How?
					
You can reach Chania airport from all over Europe.
				
			
		

		

			
Resize the browser window to see how the content respond to the resizing.
		
	

参考：

https://www.yuque.com/docs/share/7adf2325-f85e-42f2-8081-cc7786ef70b2