Support » Themes and Templates » Iframes not responsive

  • Hi
    I’m working on two websites with URL http://www.moveindazity.nl/ (theme: Gymbase) and URL
    http://www.bienebiensart.com/ with iframes.

    On the moveindazity (Gymbase) I have also installed a child theme.
    But in the regular Gymbase there already is a custom.css file (and I prefer working with the parent theme).

    I hade an iframe of a Youtube video. I put this in a div with 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 the custom.css I put the following code:

    .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%;
    }

    The page is: http://moveindazity.nl/video-piloxing-3/

    First the video was visible but for some reason now not anymore.
    It has never been responsive.

    I used the same CSS code in the child theme, but also it is not responsive. I put the CSS in style.css of the parent, but not responsive. I used more browsers like Opera, Firefox, Chrome…
    The page at bienekebiensart.com is: http://www.bienekebiensart.com/piloxing-container/
    This seems a little more responsive -except for the smartphone.

    I also used media queries, these are the codes:

    <h2>Tablet, pc en breedbeeld</h2>
    <div class="tabletpc">
     <iframe width="72%" height="540" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
    </div>
    <h2>Smartphone landscape</h2>
    <div class="landscape">
     <iframe width="512px" height="286px" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
    </div>
    <h2>Smartphone portrait</h2>
    <div class="portrait">
     <iframe width="290px" height="164px" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
    </div>

    and the CSS:

    @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;
    }
    }

    The pages are: http://moveindazity.nl/video-piloxing2/ and http://www.bienekebiensart.com/piloxing-media-queries/.
    Again, on bienekebiensart.com it seems a little more responsive -except for the smartphone.

    I need to have the iframes responsive at moveindazity.nl.
    I made the same pages + CSS on bienekebiensart.com just to test.
    The iframes are not responsive at moveindazity.nl. I have spent many hours on it already this is the reason of this post.
    The custom.css (and style.css) seem to be loaded well because all the other CSS works fine.

    I also built a simple HTML/CSS website with the same codes in it (to test) and this works fine! It does not seem to work with moveindazity.nl.

    If you want to/can help me.. I prefer using the video container because it is less HTML and CSS -less work. But if I have to, I will use the media queries instead.
    Does anyone have a hint/suggestion..?
    Sincerely
    Sasseke

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Iframes not responsive’ is closed to new replies.