Results 1 to 4 of 4

Thread: Looking for a jQuery/JS solution to make a Youtube video responsive

  1. #1
    Join Date
    Jan 2017
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Arrow Looking for a jQuery/JS solution to make a Youtube video responsive

    Hi,

    Looking for a solution to make a Youtube video iframe responsive I found this page:

    Fluid Width Video

    Now I'm trying for hours to apply it on my code example here:

    Trying to make it responsive

    but it's not working and I don't understand why.

    Could you please help me with this? I'm not looking for a CSS solution. I'm looking for a jQuery/JS solution.

    Thanks

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    476
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

    Your codepen effort seems to to work OK here in Opera, Firefox & Chrome. Which browser are you using?

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,815
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    This code works for me except that setPaddingTop() doesn't seem to do anything:
    Code:
    <!doctype html>
    <html lang="nl" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Fluid YT</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    
    <style>
    /* ==========================================
                   Global Styling
    ========================================== */
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    .cf:before,
    .cf:after {
      content: " ";
      display: table;
    }
    .cf:after {
      clear: both;
    }
    
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    
    /* ==========================================
                     Styling
    ========================================== */
    body {
      background-color: rgb(218, 237, 245);
      margin: 0;
    }
    header {
      position: fixed;
      background-color: #fff;
      width: 100%;
      height: 75px;
      z-index: 2;
    }
    .logo {
      img {
        width: 200px;
        height: 45px;
        margin: 15px auto;
      }
    }
    main {
      background-color: #fff;
      width: 50%;
      margin: 0 auto;
      padding-top: 75px;
      z-index: 1;
    }
    
    #main-video {
      outline: 3px solid red;
    }
    
    .second-section {
      article {
        margin-top: 20px;
        cursor: pointer;
    
        img {
          width: 45%;
          float: left;
        }
    
        .details {
          float: right;
          width: 54%;
          padding: 0 15px;
          text-align: left;
        }
      }
    }
    
    </style>
    
    
    
    
    </head>
    
    <body>
    
    <iframe width="560" height="349" class="resp-iframe" src="http://www.youtube.com/embed/qxWrnhZEuRU?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
    
    <div class="second-section" style="background: red">second section</div>
    
    <script>
    // Find all YouTube videos
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),
    
        // The element that is fluid width
        $fluidEl = $("body");
    
    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {
    
      $(this)
        .data('aspectRatio', this.height / this.width)
    
        // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width');
    
    });
    
    // When the window is resized
    $(window).resize(function() {
    
      var newWidth = $fluidEl.width();
    
      // Resize all videos according to their own aspect ratio
      $allVideos.each(function() {
    
        var $el = $(this);
        $el
          .width(newWidth)
          .height(newWidth * $el.data('aspectRatio'));
    
      });
    
    // Kick off one resize to fix all videos on page load
    }).resize();
    
    /* ==========================================
        Set the padding-top of the second section 
        equal to the height of the iframe
    ========================================== */
    
    const setPaddingTop = () => {
      // clientHeight includes the height and vertical padding. (see also offsetHeight and scrollHeight)
      let iframeHeight = document.querySelector(".resp-iframe").clientHeight;
    
      let secondSection = document.querySelector(".second-section");
    
      secondSection.style.paddingTop = iframeHeight;
    
      // Apply the above also if window gets resized
      window.addEventListener(
        "resize",
        function() {
          let iframeHeight = document.querySelector(".resp-iframe").clientHeight;
          secondSection.style.paddingTop = iframeHeight;
        },
        true
      );
    };
    
    setPaddingTop();
    
    </script>
    
    </body>
    
    </html>

  4. #4
    Join Date
    Jan 2017
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help.
    The code is already been fixed.

Similar Threads

  1. Video non responsive
    By ipbr21054 in forum CSS
    Replies: 23
    Last Post: 11-01-2016, 07:47 PM
  2. Replies: 27
    Last Post: 03-27-2015, 07:03 PM
  3. make only one youtube video playing
    By bd0 in forum Flash
    Replies: 3
    Last Post: 06-27-2008, 02:23 AM
  4. DHTML Modal window, trying to make a digg video like video section
    By dutchmaster in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-12-2007, 02:15 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •