Ошибка chrome с подсчетом столбцов и iframe: iframe не отображается во втором столбце - PullRequest
2 голосов
/ 06 мая 2020

У меня проблема с iframe и количеством столбцов. У меня есть div с двумя столбцами, а iframe youtube работает только в первом столбце на Chrome. Он отлично работает в Safari: Chrome Safari

Я нашел несколько сообщений об этом, но ответы у меня не работают.

Это код HTML:

<div class="container-job column-2">
 <h2>Enseignement côte-à-côte</h2>
 <p>Au lycée, l'enseignement se fait en "face à face" - un prof vous livre des connaissances que vous devez acquérir en vue d'une évaluation.</p>
 <img class="alignnone wp-image-11512 size-full" src="https://ynov-bordeaux.com/wp-content/uploads/2020/04/cours-cote-a-cote-informatique.jpg" />
 <p>Lors de votre première année, vous découvrirez l'enseignement côte à côte. Concrètement, cela signifie que l'enseignant ou l'intervenant se place à côté de vous pour suivre votre progression. Cela implique un suivi personnalisé et la prise en compte du niveau de chacun. Chaque enseignant Ynov est un professionnel de son secteur. Leur expertise est reconnue et cela en fait un point fort de nos formations. Ainsi, vous n'apprenez pas seul face à votre ordinateur mais bien en présence d'un expert qui vous aidera à saisir les concepts et réussir toutes les étapes de votre apprentissage !</p>
 <h2>Enseignement par projets</h2>
 <p><strong>L'enseignement par projet est en place depuis très longtemps</strong> au sein des Campus Ynov. C'est prouvé par de nombreuses études : apprendre en faisant est le meilleur moyen de fixer les savoirs durablement. Vous le savez d'expérience, si vous avez appris une technique simplement en regardant un cours ou en lisant un livre, il est très difficile de se souvenir des informations. En revanche si vous avez fait, une recette de cuisine par exemple, il est bien plus facile de refaire et vous avez enregistré la plupart des étapes de votre projet. En informatique, c'est la même chose !</p>
 <p>Notre programme pédagogique nouvelle formule comprend une grande partie dédiée au développement informatique. Cependant, l'infrastructure et réseau occupe aussi une place de choix afin de former les futurs experts en infrastructure qui sont essentiels au fonctionnement d'un réseau informatique.</p>
 <h3 class="wp-block-embed__wrapper">L'Intelligence Artificielle au cœur de nos enseignements</h3>
 <p>De plus, nous mettons en place des conférences et ateliers nationaux accessible à tous les étudiants. En visio conférence ou en direct, plusieurs experts se succéderont pour présenter des concepts innovants en matière d'Intelligence Artificielle, de Sécurité Informatique ou de Développement et Stratégie.</p>
 <p><iframe width="500" height="300" src="https://www.youtube.com/embed/b2u-Bk3mXw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
 <h2>Les Ydays pour réaliser vos projets</h2>
 <p>Enfin, nous retrouvons cette année encore la formule <a href="https://ynov-bordeaux.com/les-ydays-racontes-par-les-etudiants/">Ydays</a> qui a fait ses preuves ! Avec 160 heures consacrées à vos projets et vos besoins d'évolution ou de perfectionnement, vous aurez le choix de créer et d'expérimenter sur les sujets qui vous passionnent !</p>
 <h2>Une phase d'intégration pour souder le groupe et maîtriser la plateforme</h2>
 <p>Pour introduire ces nouveautés après plusieurs années dans le système scolaire classique, il est évident qu'il faut passer par une phase d'adaptation. Celle-ci commence souvent dès votre inscription en prenant en main votre adresse email, et en devenant autonome par rapport aux informations qui vous sont transmises. Vous êtes invité régulièrement à participer à votre future vie étudiante.</p>
 <p>Dès la rentrée, <strong>vous serez accompagné dans cette grande transformation</strong>. Personne n'est laissé à lui-même dans un premier temps. L'intégration dure 4 semaines. Cette phase est intensive tant en terme d'acquisitions techniques et de mises à niveau que d'activités d'inclusion au groupe d'étudiant.</p>
 <p><iframe width="500" height="300" src="https://www.youtube.com/embed/XLn0TSo_mrU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
 <blockquote>Plutôt qu'une immersion en mode piscine, nous voyons cette période comme une piste de décollage vers votre autonomie et votre future vie professionnelle.</blockquote>
 <h2>Organisation en demi-journée</h2>
 <p>Sur le Campus Ynov, les journées de cours ne dépassent pas 6 heures. Cette organisation en demi-journée vous donne plus de liberté pour tout le reste. Vous avez du temps pour développer vos propres projets ou améliorer vos acquis.</p>
 <h2>Des évaluations croisées</h2>
 <p>Les évaluations ne sont pas conçues comme des pièges mais bien comme <strong>une mesure fiable de notre efficacité combinée</strong>. Si un étudiant n'a pas le niveau prévu, nous revoyons sa méthode, si toute la classe n'a pas réussi, nous revoyons notre méthode. C'est pour cela que nous utilisons aussi des évaluations croisées. Nous évaluons chaque étudiant mais ce n'est pas la seule vision qui compte. Les étudiants évaluent - selon les situations - leurs pairs ainsi que leurs enseignants. Les enseignants évaluent les étudiants mais aussi le fonctionnement du groupe : ici, pas question de voler solo ! On travaille en équipe et tout le groupe progresse ensemble.</p>
 <p>Cette vision de l'enseignement en école informatique diffère de ce que l'on peut constater dans certains systèmes. On trouve en effet sur le marché de la formation privée des établissements très exigeants mais qui laissent beaucoup de jeunes sur le côté. Au sein d'Ynov, nous pensons au contraire que l'on peut allier l'excellence et la solidarité, la performance et le travail en équipe ; tout en restant à la pointe des nouvelles technologies.</p>
 <p>Si cette vision vous parle, n'hésitez pas à  nous contacter, il reste peut-être quelques places pour la prochaine rentrée !</p>
</div>

А это код CSS:

.container-job {
 max-width: 1440px;
 margin-left: auto; 
 margin-right: auto;
}

.column-2 {
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
}

.container-job img {
 max-width: 100%;
 height: auto;
}

iframe {
 display: block;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
}

CodePen, если хотите: https://codepen.io/mathildebaudino/pen/rNOvXow

Заранее благодарю за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...