University of St Andrews

Responsive embed

The responsive embed pattern automatically determines the dimensions of media content based on the width of the containers they are embedded in. A fixed ratio allows embedded content to scale appropriately on any device.

Rules for the responsive embed

This wrapper div must have two classes: embed-responsive plus one that determines its aspect ratio.

There are two ratios available:

• 16:9 embed-responsive-16by9. Use this to show videos, it is better suited for use with HD media.
• 4:3 embed-responsive-4by3. Use this to display maps, in mobile view a smaller ratio makes them hard to view.

	// iframe, embed, video or object with embed-responsive-item class

You don't need to include frameborder="0" in your iframe as Bootstrap overrides that for you.

Options available

• 16:9 (content whole)
• 4:3 (content whole)
• 16:9 (content thirds)
• 4:3 (content thirds)
• 16:9 (content halves)
• 4:3 (content halves)

16:9 (content whole)

4:3 (content whole)

16:9 (content thirds)

    

            

                

                    
                
            
            

                  
 
  
 
 
Accommodation
 
 
 
Related content
Item 1
Item 2
Item 3
            
        
    

4:3 (content thirds)

    

            

                

                    
                
            
            

                  
 
  
 
 
Accommodation
 
 
 
Related content
Item 1
Item 2
Item 3
            
        
    

16:9 (content halves)

    

            

                

                    
                
            
            

                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.
            
        
    

4:3 (content halves)

    

            

                

                    
                
            
            

                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.