Contoh iframe responsive



<div class="container"> 
  <iframe width="560" height="315" src="https://www.youtube.com/embed/MNKMhJZjTRU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
  @media (max-width:480px) and (min-width:320px) {
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
       
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
    
    div.container {
    position: sticky;
    position: -webkit-sticky;
   top: 66px;
}
    
  }

@media (min-width:1281px) {
  iframe {
    
    border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
       width: 560px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
  
     div.container {
    position: sticky;
    position: -webkit-sticky;
   top: 70px;
       
}
  
  }
  



</style>