YouTube iframe API: ne peut pas répondre

Je suis en train de mettre en œuvre une vidéo de Youtube, via l'iFrame de l'API. J'ai besoin d'attraper certains événements afin d'intégrer le joueur seul n'est pas une option.

Tout fonctionne très bien comme il est expliqué dans les docs, je vais appeler la vidéo comme ceci:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
if($("#video_1").length){
    player = new YT.Player('video_1', {
        videoId: 'BmsPsdVmkSw',
        playerVars: { 'autoplay': 1, 'controls': 0, 'info': 0, 'rel': 0, 'wmode': 'transparent' },
        events: {
            'onStateChange': goToVS
        }
    });
}

Le problème est que j'ai besoin de faire de la vidéo s'adapter à la largeur de l'écran à l'air bien sur les téléphones et les tablettes, mais après avoir essayé ce genre de choses avec les CSS:

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 
.video-container iframe, .video-container object, .video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

Et ce avec JavaScript: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Je ne peux pas le faire fonctionner. Tout les trucs avant les beaux travaux sur un code Youtube mais ils ne le font pas avec l'iframe API.

Une idée?

Merci!

double possible de réduire la taille d'une vidéo Youtube en responsive largeur

OriginalL'auteur CV-Gate | 2014-04-01

  1. 13

    J'ai fait ce travail moi-même il y a quelques jours, le projet est actuellement pw-protégé malheureusement ou je vous ferais partager l'URL.

    Il aiderait si vous souhaitez inclure le code HTML que vous utilisez, car je pense que c'est là où est ton problème. Le responsive fin de ce qui peut être pur CSS; basé sur javascript/css, il devrait être quelque chose comme ceci:

    <div class=video-container>
    <div id=video_1></div>
</div>

    Le problème est facile à exécuter en est que YT.Joueur remplace le nom de la div avec un iframe plutôt que d'insérer un iframe dans div.

    aussi, dans votre YT.Appel de joueur que j'avais à hauteur/largeur de 100% des appels, par exemple,

    new YT.Player('video_1', {
    videoId: 'BmsPsdVmkSw',
    height: "100%",
    width: "100%"

    mais qui peut être inutile compte tenu de la css définition que vous avez déjà fait.

    Bonne chance!

    Seuls les nombres sont autorisés en "hauteur" et "largeur". developers.google.com/youtube/...
    La documentation ne dit que ces valeurs sont des "nombres", mais l'API est très heureux de prendre des valeurs en pourcentage.
    Vous avez raison. Dans mon cas, ils ne fonctionnent que s'ils sont entre guillemets. hauteur: '100%', width: '100%'
    Marian07 est exact-je l'ai édité mon code d'exemple citer la hauteur/largeur de valeurs. J'ai regardé dans mon propre usage, d'autres lieux et YT API est très heureux d'avoir les numéros de cité.
    la hauteur à 100% n'est pas de travail. la largeur est très bien. des idées?

    OriginalL'auteur Will

  2. 1

    Votre réglage de la largeur et de la hauteur de l'iframe (1280 x 720). Il ne peut pas être fixé tailles de pixel sur l'iframe. Le".vidéo-conteneur iframe' CSS est ce qui définit la largeur et la hauteur (100% x 100%, c'est à dire de liquide).

    Merci pour vos commentaires, mais j'ai aussi essayé avec pas de paramètres de taille et il ne fonctionne pas non plus. C'est pourquoi j'ai édité le post et supprimé cette partie du code, pour éviter toute confusion.

    OriginalL'auteur jswitchback

  3. 0

    Vous pouvez utiliser player.setSize() pour mettre à jour la taille du lecteur après que le joueur de l'objet a été créé.

    https://developers.google.com/youtube/iframe_api_reference#Playback_controls

    OriginalL'auteur user3099071

  4. -1

    Enfin, je pouvais le comprendre. J'ai redimensionné la vidéo à l'aide de JavaScript, mais après la readyEvent a été congédié.

    pourriez-vous partager l'extrait de code.

    OriginalL'auteur CV-Gate