Отрегулируйте iframe по отношению к исходному соотношению высоты и формата встроенного видео на Facebook

Question

Я пытаюсь разместить видео на Facebook на своем сайте.Однако, как и многие до меня, я изо всех сил пытаюсь определить их размер.

Следуя официальной документации , я понял, что первый способ сделать это (с помощью js SDK) предоставил простой способ получитьрегулируемые видео, но было примерно в два раза медленнее, чем при использовании iframeНо, конечно, в последнем случае, только ширина видео будет соответствовать его контейнеру.

Я попытался получить доступ к данным iframe, чтобы получить исходную высоту видео и CSS, чтобы отрегулировать его ширину на основе примеров кода, которые я нашелв Интернете, но не может из-за той же политики происхождения.

https://codepen.io/Angc/pen/ExYGNOO

<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
  <div>
    <iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&amp;show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>

  </div>
  <span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>

  </div>
</div>

.embed-iframe-facebook {
  max-width: 300px;
}

.embed-iframe-facebook div {
  position: relative;
  height: 0;
  padding-top: 178%;
}

.embed-iframe-facebook iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Более того, я не могу найти способ рассказать о iframe«настроить его размер в соответствии с его содержанием».В идеале я хотел бы сделать это и определить его высоту, чтобы я мог отрегулировать его ширину, чтобы создать искусственную «максимальную высоту».

Поэтому мой вопрос: как я могу получитьiframe настроить его высоту для встроенного видео?

Answer 1

Можно позволить iFrame заполнить родительский div.

Например:

.container {
    display: block;
    height: 100vw;
}
.iframeContainer {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px;
    clear: both;
}
.embed-area {
    clear: both;
    width: 100vw;
}

И использовать следующую разметку HTML.

<div class="root">
    <div class="container">
        <div class="embed-area">
            <div class="iframeContainer">
               <!-- Render the iFrame in this div. -->
               <!-- It will now fill up the div, unless other style rules are preventing it. -->
            </div>
        </div>
   </div>
</div>