Code Block Impacting Responsive Design

Site URL: http://www.facilibuildhub.com/tech-platform

I'm using a code block for this video so it doesn't show related videos at the end. I also added a CSS code to the block so it resizes properly for mobile. However, I've now discovered that the code is impacting the website's responsive design. If I minimize the tab I have it open in, the video block runs into the side bar and everything is overlapping. 

Any idea how to fix this?

Remove, make a copy somewhere, any CSS you have used to manipulate the code block

Add the following CSS.

/* begin make YouTube video responsive */

  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content {
  
    position : relative;
    overflow : hidden;
    width : 100%;
    
    }
    
  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content::after {
  
    content : '';
    display : block;
    padding-top : 56.250%;
    
    }
    
  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content iframe {
  
    height : 100%;
    left : 0;
    position : absolute;
    top : 0;
    width : 100%;
    
    }
    
  /* end make YouTube video responsive */

Based on code from How to Make YouTube Video Embeds Responsive With CSS.

Let us know how it goes.