Как скрыть iframe до нажатия ссылки?

Question

LastGeneral @LastGeneral

HTML
CSS

Как скрыть iframe до нажатия ссылки?

<div class="hero-title__btn__intro">
	<a href="" class="hero-title__btn__link js-open-modal" data-modal="1">Посмотрть видео</a>
</div>
<div class="modal modal-intro" data-modal="1">
	<svg class="modal__cross js-modal-close" viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>
	<div class="modal__content">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/C2Ps1ZUShZ4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</div>
<div class="overlay js-overlay-modal"></div>

.overlay {
   opacity: 0;
   visibility: hidden;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .5);
   z-index: 20;
   transition: .3s all;
}
.modal {
	position: absolute;
	top: 33em;
	min-width: 390px;
	opacity: 0;
    visibility: hidden;
    width: 270px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    box-shadow: 0 3px 10px -0.5px rgba(0, 0, 0, .2);
    text-align: center;
    padding: 30px;
    border-radius: 3px;
    background: #2d2d2d;
    color: #ccc;
    text-align: left;
    transition: 0.3s all;
}
.modal-intro {
	width: auto;
	padding: 0;
}
.modal.active,
.overlay.active{
   opacity: 1;
   visibility: visible;
}
.modal__cross {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 35px;
    right: 30px;
    fill: #fff;
    cursor: pointer;
}
.modal__title {
	margin: 0 0 1em;
}
.modal__content input,
.modal__content textarea {
    width: 100%;
    padding: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #454545;
    background: #3d3f41;
    color: #fff;
	outline: none;
}
.modal__content span.required {
    font-size: 16px;
    color: #ff2424;
}
.modal__content input[type=submit] {
    padding: 0.5em;
    font-size: 1em;
    border: 0;
    border-radius: 10px;
    background: #FF6E00;
    color: #fff;
}

// modal
!function(e){"function"!=typeof e.matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(e){for(var t=this,o=(t.document||t.ownerDocument).querySelectorAll(e),n=0;o[n]&&o[n]!==t;)++n;return Boolean(o[n])}),"function"!=typeof e.closest&&(e.closest=function(e){for(var t=this;t&&1===t.nodeType;){if(t.matches(e))return t;t=t.parentNode}return null})}(window.Element.prototype);

document.addEventListener('DOMContentLoaded', function() {

   var modalButtons = document.querySelectorAll('.js-open-modal'),
       overlay      = document.querySelector('.js-overlay-modal'),
       closeButtons = document.querySelectorAll('.js-modal-close');

   modalButtons.forEach(function(item){

      item.addEventListener('click', function(e) {

         e.preventDefault();

         var modalId = this.getAttribute('data-modal'),
             modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');

         modalElem.classList.add('active');
         overlay.classList.add('active');
      });

   });


   closeButtons.forEach(function(item){

      item.addEventListener('click', function(e) {
         var parentModal = this.closest('.modal');

         parentModal.classList.remove('active');
         overlay.classList.remove('active');
      });

   });

    document.body.addEventListener('keyup', function (e) {
        var key = e.keyCode;

        if (key == 27) {

            document.querySelector('.modal.active').classList.remove('active');
            document.querySelector('.overlay').classList.remove('active');
        };
    }, false);
	
    overlay.addEventListener('click', function() {
        document.querySelector('.modal.active').classList.remove('active');
        this.classList.remove('active');
    });
});