Удалить черные границы для встраивания youtube

Я пытаюсь вставить видео YouTube на фоне моего веб-сайта. У меня эта работа, и она отзывчива, за исключением того, что когда мой встроенный видеоролик широкоэкранный (16: 9), но мой видовой экран, например, квадрат (1: 1), он создает черные границы, чтобы компенсировать оставшееся пространство.Удалить черные границы для встраивания youtube

enter image description here

мне было интересно, если есть возможность обрезать видео, так что «центр» на видео всегда на экране, так же, как в примере выше изображения. Остальные части будут обрезаны. Я думаю, что эквивалент CSS для изображений будет background-size: cover;.

Вот код, который у меня есть в данный момент. Попытайтесь сделать свой квадрат видового экрана, и вы увидите черные границы. Он также доступен в jsfiddle.

<html> 
<head> 
    <style> 
     body,html{ margin:0; padding:0; height:100%;} 

     div.bg_utube { 
      position: fixed; 
      z-index: -99999; 
      -webkit-user-select: none; 
      user-select: none; 
      width: 100%; 
      height: 100%; 
     } 
     #player{ 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
</head> 

<body> 
<div class="bg_utube"> 
    <div id="player"></div> 
    <script> 
     var tag = document.createElement('script'); 
     tag.src = "http://www.youtube.com/player_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     var player; 
     var video_id = 'JQ7a_8psCn0'; 

     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('player', { 
       height: '390', 
       width: '640', 
       videoId: video_id, 
       playerVars: { 
        'autoplay': 1, 
        'controls': 0, 
        'html5': 1, 
        'modestbranding': 1, 
        'showinfo': 0, 
        'related': 0}, 

       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     function onPlayerReady(event) { 
      event.target.playVideo(); 
      player.mute(); 
      event.target.setPlaybackQuality('hd720'); 
     } 

     function onPlayerStateChange(event) { 

      if (event.data == YT.PlayerState.PLAYING) { 

      } 

      if(event.data === YT.PlayerState.ENDED){ 
       player.loadVideoById(video_id); 
      } 
     } 
    </script> 
</div> 
</body> 
</html>

Я искал в Google решения, но не смог найти. Многие были специально для <object> и <embed>, используя старый стиль встраивания youtube. Я использую API YouTube для воспроизведения HTML5-плеера.

Может ли кто-нибудь дать мне толчок в правильном направлении?

источник

2015-04-30 cpb2

Любой шанс, что вы могли бы использовать тег

Я не думаю, что у меня есть контроль над API YouTube, каким образом он генерирует код для моего видео. В настоящий момент это станет iframe. Кроме того, тег '

Стандартная вставка youtube DOES поддерживает больше, так как

Игрок создает IFRAME, в котором видео играет с YouTube Это представляет собой проблему, потому что вы не можете изменить параметры объектов в поперечных доменов. Объект, который ссылается на видео, находится в player.c.contentWindow.querySelector(".video-stream.html5-main-video")

Только решение, которое я сейчас должен преобразовать контейнер. bg_utube с помощью CSS, как этот

div.bg_utube { 
     position: fixed; 
     z-index: -99999; 
     -webkit-user-select: none; 
     user-select: none; 
     width: 100%; 
     height: 100%; 
     -ms-transform: scale(2,3); 
     -webkit-transform: scale(2,3); 
     transform: scale(2,3); 
    }

источник

2015-04-30 10:08:58

Спасибо за ваше решение. Это, очевидно, не лучшее решение, но пока это будет лучше. – cpb2

Удалить черные границы для встраивания youtube

ответ

Смежные вопросы