JSFiddle - React, Tailwind, and code Playground

by codert

HTML

<div class="wrap-container">
   <iframe src="https://www.baidu.com" frameborder="0" class="iframe"></iframe>
</div>
<div class="control">
  <button id="btn1">change to 200px</button>
  <button id="btn2">change to 300px</button>
  <button id="lock">Lock</button>
</div>

CSS

.wrap-container {
  height: 300px;
}

.iframe {
  height: 100%;
  width: 100%;
  display: block;
}

JavaScript

let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
let lock = document.getElementById('lock')
let container = document.querySelector('.wrap-container')

btn1.addEventListener('click', () => {
	container.style.height = '200px'
}, false)

btn2.addEventListener('click', () => {
	container.style.height = '300px'
}, false)

lock.addEventListener('click', () => {
	container.style.pointerEvents  = container.style.pointerEvents ? '' : 'none'
  container.style.userSelect = container.style.userSelect ? '' : 'none'
}, false)