Как сделать фулскрин для ютуб-роликов?

Question

tundramani @tundramani

Как сделать фулскрин для ютуб-роликов?

использую ютубовский апи для внедрения роликов на свой сайт

но при нажатии на кнопку Фулскрин в окне ролика - всплывает сообщение что фулскрин невозможен

проверил на дескотопе и в айос хроме

Вопрос задан более трёх лет назад
191 просмотр

Комментировать

Подписаться 1 Простой Комментировать

Помогут разобраться в теме Все курсы

Skillbox

JavaScript

3 месяца

Далее
Яндекс Практикум

Фронтенд-разработчик расширенный

13 месяцев

Далее
Академия Eduson

Fullstack-разработчик на JavaScript

11 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

12 комментариев

tundramani @tundramani Автор вопроса

это не помогает

Написано более трёх лет назад
Danny Arty @DanArst Куратор тега JavaScript

js-css-html-php, а что написано в ошибке?

Написано более трёх лет назад
tundramani @tundramani Автор вопроса

всплывает сообщение - фулскрин невозможен в этом браузере

но в этом же браузере на сайте ютуба фулскрин работает

Написано более трёх лет назад

tundramani @tundramani Автор вопроса

Danny Arty,

<body>

<div id="id_плеера" class=""></div>

<script> "use strict"




let скрипт = document.createElement('script')
скрипт.src = 'https://www.youtube.com/iframe_api'
document.body.appendChild(скрипт)

let плеер = null

window.onYouTubeIframeAPIReady = function()
{
	let о = {
	width : 500,
	height : 300,
	videoId : 'vZK1V5aekF0',
	controls : 1,
	events : {
		onReady : плеер_готов,
		onStateChange : состояние_плеера_изменилось,
		},
	}
плеер = new YT.Player('id_плеера', о)
}

let плеер_готов = function(event)
{
let окно_плеера = document.querySelector('#' + 'id_плеера')
окно_плеера.allowfullscreen = 'allowfullscreen'
event.target.playVideo()
}

let состояние_плеера_изменилось = function()
{
}


</script></body>

Написано более трёх лет назад

Danny Arty @DanArst Куратор тега JavaScript

js-css-html-php, попробуйте добавить свою кнопку для фулскрина:

var isFullScreenMode = false;

$(".full-screen").on("click", function() {
    if (isFullScreenMode) {
        $(".video-player").height(здесь высота которую вы задаете);
        isFullScreenMode = false;
    } else {
        $(".video-player").height($(window).height());
        isFullScreenMode = true;
    }
})

Написано более трёх лет назад

Danny Arty @DanArst Куратор тега JavaScript

js-css-html-php, вот еще пример с codepen

Написано более трёх лет назад
tundramani @tundramani Автор вопроса

это что жиквери?

я не понимаю этот ужас ))

Написано более трёх лет назад
tundramani @tundramani Автор вопроса

пример посмотрел - но там почему то нет кода
наверное отображается сайт с ошибкой

какой там код js ?

Написано более трёх лет назад
tundramani @tundramani Автор вопроса

проверил пример с кодепен в хроме на айосе - не работает фулскрин
а на десктопе работает

Написано более трёх лет назад

Danny Arty @DanArst Куратор тега JavaScript

js-css-html-php, вот так сделайте

<body>

<div id="player_block"></div>
<button id="fullscreen-btn">Fullscreen</button>

<script> "use strict"




let scrpt = document.createElement('script')
scrpt.src = 'https://www.youtube.com/iframe_api'
document.body.appendChild(scrpt)

let player = null

window.onYouTubeIframeAPIReady = function()
{
  let ups = {
  width : 500,
  height : 300,
  videoId : 'vZK1V5aekF0',
  controls : 1,
  events : {
    onReady : player_ready,
    onStateChange : player_changed,
    },
  }
player = new YT.Player('player_block', ups)
}

let player_ready = function(event)
{
let player_window = document.querySelector('#' + 'player_block')
player_window.allowfullscreen = 'allowfullscreen'
event.target.playVideo()
}

let player_changed = function()
{
}

var button = document.getElementById('#fullscreen-btn');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener. 
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
  console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);

function fullscreen() {
  // check if fullscreen mode is available
  if (document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled) {
    
    // which element will be fullscreen
    var iframe = document.querySelector('#player_block iframe');
    // Do fullscreen
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    } else if (iframe.webkitRequestFullscreen) {
      iframe.webkitRequestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }
  }
  else {
    document.querySelector('.error').innerHTML = 'Your browser is not supported';
  }
}

function fullscreenChange() {
  if (document.fullscreenEnabled ||
       document.webkitIsFullScreen || 
       document.mozFullScreen ||
       document.msFullscreenElement) {
    console.log('enter fullscreen');
  }
  else {
    console.log('exit fullscreen');
  }
  // force to reload iframe once to prevent the iframe source didn't care about trying to resize the window
  // comment this line and you will see
  var iframe = document.querySelector('iframe');
  iframe.src = iframe.src;
}
</script>
</body>

Написано более трёх лет назад

tundramani @tundramani Автор вопроса

это работает! ))

Написано более трёх лет назад
tundramani @tundramani Автор вопроса

однако в хроме на айосе не работает

почему так хотелось бы понять

в сафаре работает номрально

Написано более трёх лет назад