Krijg iframes niet responsive

Opgelost Sasseke
(@sasseke)

7 jaren, 4 maanden geleden
Hoi
ik ben bezig te werken aan een website met URL http://www.moveindazity.nl/ met als theme Gymbase.

Ik heb een child theme en een gewoon theme geïnstalleerd van de Gymbase.
Echter in de gewone versie van Gymbase zit al een custom.css bestand die behouden blijft (en als laatste geladen wordt) bij eventuele updates.

Ik heb een iframe gemaakt van een Youtube video. Deze heb ik in een div container geplaatst, met als class “video-container”:
```
<div class="video-container">
    <iframe width="960" height="540" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
</div>
```
In de custom.css heb ik de volgende code geplaatst:
```
.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.video-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.video-container-4x3 {
  padding-bottom: 75%;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
```
De pagina waar het om gaat is de volgende: http://moveindazity.nl/video-piloxing-3/

Eerst was de video nog zichtbaar maar nu ineens niet meer..
in ieder geval is hij nooit responsive geweest.

Ik heb de CSS code in het child theme geprobeerd maar niet responsive. Ik heb het in de style.css geplaatst, niet responsive. Bij geen enkele browser.

Ik heb ook nog media queries gebruikt (echter dit vind ik te omslachtig ik moet dan meer versies op de page plaatsen) en bij verschillende apparaten, verschillende versies van de video op display:none gezet. Maar hij laat overal alles zien.

M.a.w. ik krijg de iframe niet responsive het lijkt wel alsof hij de CSS niet ‘pakt’ (hoewel deze wel ingeladen wordt want andere CSS neemt ie wel). Ik vraag me af of het aan het theme ligt..

Het liefst gebruik ik eerdergenoemde optie (dus niet de media queries) omdat die wat simpeler/eleganter is.

Ik heb voor de grap een kleine site gebouwd met dezelfde inhoud (HTML/CSS website) en daar ging het wel allemaal prima..

Graag uw input.
Vriendelijke groet
Sasseke

1 reactie aan het bekijken (van in totaal 1)

Thread starter

(@sasseke)

Ik heb ook nog de pagina http://moveindazity.nl/video-piloxing2/ gemaakt m.b.v. media queries proberen responsive te krijgen. Dit is de CSS code:

@media only screen and (min-width: 768px) { 
/* plaats hier de css code voor tablets en pc en breedbeeld */
.landscape iframe
{
  display:none;
}
.portrait iframe
{
  display:none;
}
}

@media only screen and (max-width: 767px) { 
/* plaats hier de css code voor smartphones in landscape mode */
.tabletpc iframe
{
  display:none;
}
.portrait iframe
{
  display:none;
}

@media only screen and (max-width: 479px) {
/* plaats hier de css code voor smartphones in portrait mode */
.tabletpc iframe
{
  display:none;
}
.landscape iframe
{
  display:none;
}
}

De items uiteraard de juiste classes gegeven.
Als je de pagina bezoekt dan zie je dat ie niet responsive is.
Groet
Sasseke

1 reactie aan het bekijken (van in totaal 1)

Het onderwerp ‘Krijg iframes niet responsive’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven