Как сделать, чтобы iframe автоматически наследовал высоту и ширину элемента, который он заменяет при клике? - PullRequest
Новая
       101

Как сделать, чтобы iframe автоматически наследовал высоту и ширину элемента, который он заменяет при клике?

1 голос
/ 01 мая 2020

Моя цель - создать интерактивную галерею музыкальных c альбомов, где, когда пользователь нажимает на обложку альбома, обложка альбома заменяется встроенным проигрывателем Spotify musi c, который заполняет пространство, которое было у обложки альбома. ранее заполненный до щелчка.

То, что у меня есть , очень близко к достижению этой цели. Когда я нажимаю на обложку альбома, она заменяется на фрейм Spotify. Тем не менее, в настоящее время у iframe другие размеры, чем у обложки альбома. Iframe сохраняет ту же ширину, но имеет гораздо меньшую высоту. Это то, что я пытаюсь исправить.

Я понимаю, что одним из вариантов является определение высоты iframe как определенного c количества пикселей. Проблема с этим методом, однако, заключается в том, что обложка альбома не имеет заданных размеров в пикселях и фактически является отзывчивой. Так есть ли способ заставить iframe наследовать высоту и ширину обложки альбома, которую он заменяет при щелчке, и сохранять ту же адаптивную природу, что и его предшественник до щелчка?

Вот сценарий onclick, который у меня сейчас есть в заголовок моей страницы: 

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
      function showForgottenDemosOnClick() {
          $("#ForgottenDemos").html("<iframe id='ForgottenDemos' src='https://open.spotify.com/embed/album/28jt7pALHovaQd21ZVEwoL' width='100%' height='100%' frameborder='0' allowtransparency='true' allow='encrypted-media'></iframe>");
      }
    </script>

А вот код в теле страницы: 

<article class="portfolio-item pf-illustrations">
    <div id="ForgottenDemos" class="portfolio-image">
        <input class="portfolio-image" type="image" ID="Image1" src="/images/albums/forgotten-demos.jpg" alt="Forgotten Demos" />
        <div class="portfolio-overlay" onclick="showForgottenDemosOnClick();return false">
            <div class="portfolio-desc">
                <h3><a href="" onclick="showForgottenDemosOnClick();return false">Forgotten Demos<a></h3>
            </div>
        </div>
    </div>
</article>
...