JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<!-- embed responsive iframe --> 
<!-- ======================= -->

<div id="infi-iframe-resp">
  <div class="infi-responsive-wrapper 
     infi-responsive-wrapper-wxh-572x612"
     style="-webkit-overflow-scrolling: touch; overflow: auto;">

    <iframe src="//www.slideshare.net/slideshow/embed_code/key/78NW2yxg5UZMM3"> 
      <p style="font-size: 110%;"><em><strong>ERROR: </strong>  
An &#105;frame should be displayed here but your browser version does not support &#105;frames. </em>Please update your browser to its most recent version and try again.</p>
    </iframe>
    
  </div>
</div>

CSS

#infi-iframe-resp {
  max-width: 512px;
  max-height: 100%; 
  overflow: hidden;
}

.infi-responsive-wrapper {
  position: relative;
  height: 0;
}
 
.infi-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  border: none;
}

.infi-responsive-wrapper-wxh-572x612 {
  padding-bottom: 107%;
}