University of St Andrews

Responsive embed

Allow browsers to determine video or map dimensions based on the width of their containing block by creating a responsive ratio that will properly scale on any device.

First, give your iframe, embed, video or object element a class of embed-responsive-item then wrap it with the following HTML code:

The second class in the parent div decides the video's ratio. There are two choices:

• 16:9 embed-responsive-16by9 : use this to show videos, as its much 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.

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 thrids)
• 4:3 (content thrids)
• 16:9 (content halves)
• 4:3 (content halves)

16:9 (content whole)

4:3 (content whole)

16:9 (content thrids)

    

            

                

                    
                
            
            

                  
 
  
 
 
Accommodation
 
 
 
Related content
Item 1
Item 2
Item 3
            
        
    

4:3 (content thrids)

    

            

                

                    
                
            
            

                  
 
  
 
 
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.