title: Replacing Images with iframes
body: <p>I have been asked to replace images with iframe videos. The code given to me appears as a banner on the specific website (<a href="https://www.bongenie-grieder.com/" rel="nofollow noreferrer">https://www.bongenie-grieder.com/</a>). The code I was given is the following:</p>
  <pre><code>.sliderUn {
      background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-500x580.jpg');
      background-position: center top!important;
  }
      
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    .sliderUn {
      background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-1000x1160.jpg');
  background-position: center top!important;
      
  
  }
  }
  
  @media screen and (min-width: 320px) {
      .sliderUn {
      background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-500x580.jpg');
      background-position: center top!important;
  }
  }
  
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 350px),
  only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 350px),
  only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 350px),
  only screen and (        min-device-pixel-ratio: 2) and (min-width: 350px),
  only screen and (                min-resolution: 192dpi) and (min-width: 350px),
  only screen and (                min-resolution: 2dppx) and (min-width: 350px) { 
    .sliderUn {
      background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-1000x1160.jpg');
      background-position: center top!important;
  
  }
  }
  
  @media screen and (min-width: 640px) {
      .sliderUn {
      background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-2000x570.jpg');
      background-position: center top!important;
  }
  }
  
  
  @media screen and (min-width: 1600px) {
       .sliderUn {
          background-image:url('[imagePath]Attachment/Homepage/2020/08/21/HP1-4000x1140.jpg');
  background-position: center top!important;
      }
  }
      @media screen and (max-width: 414px) {
          .home-slider .home-title {
          max-width: 280px;
          text-align: center;
      }
          .home-sup-title {
              max-width: 280px;
          }
          
      }
      
      @media screen and (min-width: 415px) and (max-width: 1024px){
          .home-slider .home-title {
          max-width: 600px;
          text-align: center;
      }
      }
      
      .left_espot .home-slider {
   min-height: 400px;
  }
  </code></pre>
  <p>Does anyone know how this can be done? I am unfortunately a total noob at coding. Thanks a million for your help!</p>