video responsive

[dagone]

Bonjours,

Je cherche depuis un moment la solution à un problème de réactivité, fluidité, de liens vidéo YouTube en fonction des différentes résolutions, et dimensions des fenêtres du navigateur.
En effet, le design fluide de mon site jimdo s'adapte parfaitement, mais pas mes vidéo...
J'ai lu qu'il fallait changer certaines données comme les dimensions en Px vers %.

Voir les liens :
http://paranormale-entreprise.fr/integrer-une-video-youtube-responsive/
http://lesdoigtsdanslenet.com/video-responsive-css/
http://www.grafikart.fr/tutoriels/html-css/video-iframe-responsive-385

Si quelqu'un pouvait m'expliquer clairement comment réaliser ces modifications?
(En sachant que j'ai un peu de mal à comprendre comment insérer un code css et html pour les vidéo via mon site jimdo, etc..)

Ceci étant, n'y a t'il pas d'autres solutions plus rapide, plus simple que ce que j'ai pu lire, car j'ai énormément de vidéo déjà en liens. Faut-il à chaque fois retrouver les liens et les transformer? Est il possible, en examinant les éléments, de directement rendre mes liens YouTube responsives? Est il possible de retrouver ce type de fonction en passant via la version mobile du site?

[FilmsdeLover]

En fait, il faut sans doute ne pas passer par un module "Vidéo" pour intégrer des vidéos sur votre site, mais par un module "Widget/HTML" dans lequel vous collez le code d'intégration des vidéos Youtube que vous trouvez sous les vidéos, dans l'onglet "Partager". Le code ressemble à ça :

Code:

<iframe width="560" height="315" src="//www.youtube.com/embed/8OaPm-T7CWs" frameborder="0" allowfullscreen></iframe>

C'est là que vous pouvez modifier le 560 et 315 en 100%. A tester.

[dagone]

Ok, merci à vous FilmsdeLover (et mon amie vous remercie également pour votre site qu'elle adore.) , c'est clair, je test et ça marche à peut près, mais j'ai encore quelques soucis.
Je colle mon lien youtube dans une div de classe "videotest", par exemple:

<div class="videotest">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/Lf5F0v_FYSQ" frameborder="0" allowfullscreen=""></iframe>
</div>

Ensuite, si j'ai bien compris, je dois paramétrer ma <div> enfant "videotest" à un parent <style> comme ceci:

<style>
    .videotest{
          width: 100%;
          height: 0%;
          padding-bottom: 56,25%;
          overflow: hidden;
          position: relative;
    }
    .videotest iframe{
          width: 100%; height: 100%;
          position: absolute;
          top: 0; left: 0;
    }
</style>

Mais voilà c'est pas vraiment ça, j'ai insérer le <style> "parent" dans le Widget de ma vidéo, et si celle-ci se retrouve responsive, elle apparait très ramassée sur elle-même avec des bords noirs, puis la partie <style> disparait quand j'enregistre mon Widget.
Je pense que j'aurais du l’insérer dans l’interface design, design personnel, mais je n'en suis pas vraiment sur?!
Je m'y prends apparemment de la mauvaise façon, j'imagine que dans la partie Html de l'interface design, le <style> parent qui paramètre le <div> enfant, va rayonner sur tout les <div> enfants de la même classe au sein de mon site? Je n’aie pour l'instant pas encore testé cette approche de peur d’altérer mon site, ce que je ferais sur un site test si je n'ai pas de solutions.
Si quelqu'un a la réponse à mon problème? J'ai l'impression d’être complétement à coté de ce que je suis censé faire.

[Contenu sponsorisé]