<div class="lite-box">
<label id="zoom-plus">Zoom Plus</label>
<label id="zoom-minus">Zoom Minus</label>
<div class="images">
*вывод картинок*
</div>
</div>.lite-box {
margin: 0px 10%;
max-height: 130vh;
overflow-y: auto;
overflow-x: hidden;
}
.images {
margin: 0 auto;
width: 100%;
.images img {
width: 100%;
height: 100%;
display: block;
margin: auto;
}<iframe src="https://www.youtube.com/embed/A_MjCqQoLLA"></iframe><script>
let els = document.querySelectorAll('iframe[src]');
els.forEach((v)=>{
v.setAttribute('data-src', v.src);
v.removeAttribute('src');
});
</script><div id="f">
<select id="name_ob" size="6">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="opt">
</div>
<script>
var f = document.getElementById('f'),
s = document.getElementById('name_ob'), o = s.querySelectorAll("option"),
inp = document.getElementById('opt'),
reg;
inp.oninput = function() {
reg = new RegExp(this.value, "ig");
s.options.length = 0;
for (var i=0; i<o.length; i++) {
reg.test(o[i].text) && s.options.add(o[i]);
reg.lastIndex = 0;
}
};
</script>