Блог

Главная - Вопросы по программированию - Как нажать на vimeo Player во весь экран при готовности документа?

Как нажать на vimeo Player во весь экран при готовности документа?

#javascript #jquery #vimeo-api

#javascript #jquery #vimeo-api

Вопрос:

Я пытаюсь нажать на vimeo Player в полноэкранном режиме при готовности документа.
Как я могу это сделать?

 <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.fullscreen-icon')[0].click(function () {
            });
        });
    </script>
</head>
<body>

<iframe src="https://player.vimeo.com/video/3873878" width="320" height="240" webkitallowfullscreen
        mozallowfullscreen allowfullscreen></iframe>

</body>
</html>

Комментарии:

1. Вы не можете получить доступ к элементам внутри iFrame, пока ваша родительская страница и iFrame не будут иметь тот же домен.

2. есть ли другой способ?

3. Измените размер iframe с width="320" height="240" максимально возможного (100vh) or 100% на document.ready . Вы можете получить доступ к свойствам элемента iFrame из родительского кода, но не к его внутренним элементам.

4. размер iframes не увеличивается на 100%.

5. С $("iframe").style.width = "100%" я могу охватить весь экран. Убедитесь, что нет родительского элемента с фиксированной высотой / шириной, которые ограничивают размер iframe. Если да, то вы можете использовать position : absolute .

Ответ №1:

Но проблема в том, что document ready будет запущен до того, как будет готов iFrame. Поскольку родительские документы готовятся первыми и запускают функцию. 

 function reszie() {
            $("iframe")[0].style.height = "100vh"
			$("iframe")[0].style.width = "100%";
      $("button")[0].style.display = "none";
        };  
 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<button onclick="reszie()">Resize<button>
<iframe src="https://player.vimeo.com/video/3873878" style="height:128px;width:256px;" webkitallowfullscreen
        mozallowfullscreen allowfullscreen></iframe>

</body>
</html>