Mettre la vidéo en iframe avec 100% de la largeur et de la lecture automatique

J'ai actuellement une vidéo vimeo intégré dans mon site web. (code ci-dessous)

<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Comme vous pouvez le voir j'ai autoplay, et il redimensionne également à pleine largeur à l'aide du code ci-dessus. Mon problème est que je viens de créer une vidéo sur les vidéos.co et j'ai besoin de réagir exactement de la même manière que le vimeo iframe ci-dessus. Ci-dessous mes Vidéos iframe, quelqu'un peut-il me montrer comment que j'ai essayé et essayé, mais n'arrive pas à obtenir de droit.

<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>
Comment ça marche ici sur de SORTE que si quelqu'un vous donne une réponse, vous "acceptez" comme une solution, ou que vous avez des commentaires sur une réponse particulière jusqu'à ce qu'une solution adéquate soit atteinte... à quel point vous l'acceptez.

OriginalL'auteur Rich Weston | 2014-12-15

  1. 9

    Pleine largeur, les vidéos sont un peu délicat. Il n'y a pas de one-size-fits-all, mais voici l'essentiel:

    1. Créer un emballage DIV qui a basés sur un pourcentage padding-top (remarque: la valeur va changer en fonction de votre situation, vous devez jouer avec cette valeur, obtenir une calculatrice, utiliser les outils de dev... vous allez comprendre).
    2. Position absolute l'iframe à l'intérieur de la DIV, avec un haut et du bas pour 0
    3. Ensemble de l'iframe largeur et la hauteur de auto

    Voici un code:

    <style>
.video-wrapper {
    position: relative;

    /* 
     Play with this value until you get the right aspect ratio.
     Note: Percentage based padding is calculated by the width of the containing element.
     Note 2: This value will be different for every website and/or media query...
    */
    padding-top: 45%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* this will override the width=""/height="" properties defined on the iframe */
    width: auto;
    height: auto;
}
</style>

<div class="video-wrapper">
    <iframe src="..."  width="540" height="310"></iframe>
</div>

    Si vous êtes paresseux, vous pouvez également la tête sur fitvidsjs qui s'occupe de la création de l'emballage DIV et le calcul de la marge pour vous. C'est un grand morceau de code et fonctionne très bien et n'a pas besoin d'une calculatrice. Je peux calculer un rembourrage plus vite que je peux aller télécharger la dernière fitvids, de le télécharger sur mon serveur, et y faire référence dans le code... mais c'est moi.

    qu'en est autoplay=1 encore les vidéos ne peuvent pas être lues?
    La lecture automatique doit encore fonctionner si le fournisseur prend en charge. HTML5 vidéo prend en charge la lecture automatique, et devrait donc plus de vidéo des fournisseurs d'hébergement.

    OriginalL'auteur Ryan Wheale

  2. 0

    Mettre le contenu dans la div, puis ajouter width="100%" de code iframe. Ajouter la lecture automatique de retour à code.

    <div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
    Pourquoi? Ne peut pas voir un problème. Si vous devez ajouter d'autres balises et des descriptions iframe - allez-y, il n'a pas de frein de code.
    merci pour votre aide @mrserge mais cela ne fonctionnerait pas
    serait-il utile de mentionner que j'ai actuellement à l'intérieur <li> balises
    Ce code ne sera pas maintenir les vidéos le ratio d'aspect et sera toujours seulement être 310px de haut. Il y a aussi deux width des attributs, qui est juste un mauvais codage de l'omi.
    Désolé, oublié de la largeur d'origine.

    OriginalL'auteur mrserge