Supprimer les bordures noires pour une youtube

Je suis en train d'intégrer une vidéo youtube sur le fond de mon site web. J'ai ce travail et il est à l'écoute, sauf que quand mon incorporer la vidéo est en format grand écran (16:9), mais ma fenêtre est par exemple le carré (1:1), il crée des bordures noires pour compenser l'espace restant.

Supprimer les bordures noires pour une youtube

Je me demandais si il y avait une option pour recadrer la vidéo, de sorte que le 'centre' de la vidéo est toujours à l'écran, comme dans l'exemple de l'image ci-dessus. Les restes de pièces seraient coupés. Je pense que le CSS équivalent pour les images seraient background-size: cover;.

Voici le code que j'ai à ce moment. Essayez de faire de votre fenêtre carrée et vous verrez les bordures noires. Il est également disponible dans une 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>

J'ai fait une recherche sur google pour des solutions, mais ne pouvais pas trouver toutes. Beaucoup ont été spécifiquement pour <object> et <embed>, à l'aide de l'ancienne youtube style. Je suis à l'aide de l'API YouTube pour le rendu d'un lecteur HTML5.

Quelqu'un pourrait me donner un coup de pouce dans la bonne direction?

Toute chance vous pourriez utiliser le <video> tag en place?
Je ne pense pas que j'ai le contrôle sur l'API YouTube de quelle manière il génère le code pour ma vidéo. Au moment où il va devenir un iframe. En outre, la <video> balise est destiné à charger dans une vidéo d'un format pris en charge (qui peut varier selon le navigateur). YouTube liens ne sont pas juste des vidéos, ils sont des pages web qui contiennent la logique de détecter que l'utilisateur de votre soutient et comment ils peuvent jouer la vidéo sur youtube, à l'aide de HTML5 ou flash, ou un autre plugin. Je suis en utilisant ce parce que je veux aider autant de dispositifs que possible. En tant que tel, je ne pense pas que <video> est une option.
Le standard youtube prend en charge plus depuis <video> est html5 pour les navigateurs compatibles. Toutefois, vous pouvez utiliser une URL comme src de la balise vidéo, et vous pouvez également faire cette source spécifique de navigateur. Cela ne résout pas le problème pour les non les navigateurs HTML5.
En fait je ne se soucient Firefox / Safari / Chrome / Android (navigateur par défaut?) / et iPhone (Safari/Chrome). Seraient-ils tous le HTML5?
Si vous allez utiliser l' <video> balise comme une alternative, être conscient de ne pas tous les formats de vidéo sont pris en charge par tous les navigateurs. H. 264 semble avoir le plus de soutien, mais c'est le statut d'un format libre n'est pas certaine: en.wikipedia.org/wiki/HTML5_video#Browser_support

OriginalL'auteur cpb2 | 2015-04-30

  1. 6

    Joueur crée iframe dans lequel la vidéo joue avec youtube
    Cela représente un problème parce que vous ne pouvez pas modifier les paramètres des objets dans de la croix domaines.
    L'objet qui contans la vidéo est en player.c.contentWindow.querySelector(".video-stream.html5-main-video")

    Seule solution que j'ai maintenant est de transformer conteneur .bg_utube avec css comme ceci

    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);
}
    Merci pour votre solution. Ce n'est évidemment pas la meilleure solution, mais ça fera l'affaire pour l'instant jusqu'à ce que j'ai une meilleure.

    OriginalL'auteur Dusan Krstic