Ручка Morphing Play Button v3
Я использую этот плагин для клика по всплывающему видео, в котором есть фрейм для видео.
Я успешно заставил его работать, но у меня возникла проблема с его установкой в центре окна.
Теперь, когда я нажал на экраноно показывает окно iframe в крайнем правом углу.вот так 
Когда я попытался отредактировать css значений <div class="play-perspective"> top и left, кнопка воспроизведения также оказалась за пределами анимированного круга.Я пытался изменить несколько значений в JS тоже, но не повезло.
Вот мой код
<section class="hero-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="margin-top:100px; margin-right:30px; height:506px; width:332px; float: right; background:url(images/Mobile-Screen.png)" >
<div class="play-backdrop"></div>
<div class="play-button">
<svg class="play-circles" viewBox="0 0 152 152">
<circle class="play-circle-01" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="343 343" cx="76" cy="76" r="72.7"/>
<circle class="play-circle-02" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="309 309" cx="76" cy="76" r="65.5"/>
</svg>
<div class="play-perspective">
<button class="play-close"></button>
<div class="play-triangle">
<div class="play-video">
<iframe width="600" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
У меня тот же CSS и JQuery связанного плагина (если потребуется, я тоже опубликую его).Я хочу, чтобы экран выглядел как первое изображение, и когда я нажимаю кнопку воспроизведения, он расширяется до ширины окна и пользовательской высоты.Пожалуйста, ведите меня, у меня это со вчерашнего дня.