J'ai besoin d'aide, je suis actuellement coincé sur la façon de définir différentes lignes min-hauteur pour deux vidéos iframe différentes de YouTube qui sont sur la même page.
actuellement ce qui semble travailler (mais seulement pour l'un ou l'autre) est Changement de la taille min-hauteur sur "CMS-page Iframe" et le réglant! IMPORTANT. P>
Voici comment le CSS a-t-il actuellement l'air actuellement: P>
.cms-page iframe {
min-height: 564px !important;
}
3 Réponses :
Donnez un autre fonctionnant parfaitement :) p> p> ID code> à chaque iframe code> et utilisez-le pour définir chacun de la hauteur minière.
J'ai donné le premier l'identifiant de iframe1 code> et le second iframe2 code>. Jetez un coup d'œil
<div class="vcontainer">
<p><iframe src="https://www.youtube.com/embed/l01s5oDySjM" frameborder="0" width="100%" id="iframe1" allowfullscreen=""></iframe></p>
<p> </p>
<p> </p>
</div>
<div class="ccontainer">
<div class="hcontainer"><img src="https://gallery.mailchimp.com/c4e779335ad94d19c242bf724/images/75b2051f-dc4d-4ca1-96f1-273d67b214fa.png" alt="" /></div>
<div class="pcontainer">
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="column">
<p style="text-align: center;"><span style="font-size: 18px; color: #777777;">We all know that after a long day, it’s tough to have energy for a good workout. With the help of 1UP Pre-Workout, you won’t feel hesitant to go train and put in the hard work.</span></p>
</div>
<div class="column">
<p id="small"><iframe id="iframe2" src="https://www.youtube.com/embed/pKJgRkV2vI8" frameborder="0" width="560" height="315" allowfullscreen=""></iframe></p>
</div>
</div>
</div>
</div>
Dans votre CSS, changez .cms-page iframe à .vcontainer iframe . .
Merci! Cela a fonctionné, j'ai utilisé VContainer pour une grande page IFrame et CMS pour plus petite iframe, vous m'avez sauvé de Crying XD
Vous ne devriez vraiment pas avoir à travailler autour de la largeur / hauteur iframe avec ce code. Il suffit de régler la largeur sur l'extérieur DIV.
p>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="width:33%">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iOHkyZ62jjQ" frameborder="0" allowfullscreen="" id="widget2"></iframe>
</div>
</div>
</div>
<div class="row">
<div style="width:100%">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iOHkyZ62jjQ" frameborder="0" allowfullscreen="" id="widget2"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
Il vous serait utile de partager tous vos HTML et CSS ici, afin que nous puissions jeter un coup d'œil à la manière dont tout est interagi.
Voici le CSS (légèrement désordonné que mon site Web est légèrement bizarre en matière de HTML / CSS, certains CSS sont également affectés à la page CMS spécifique de la page CMS ID d'édition): codepen.io/anon/pen/qgxwjx