Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Looking for a jQuery/JS solution for making 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
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,406
    Thanks
    3
    Thanked 594 Times in 580 Posts
    Quote Originally Posted by kayut View Post
    I'm not looking for a CSS solution.
    I'm looking for a jQuery/JS solution.

    Why?

    Responsiveness requires a CSS solution.

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,192
    Thanks
    6
    Thanked 1,345 Times in 1,314 Posts
    If you just have YouTube videos and they are all the same aspect ratio this is pretty simple. Do you have to use JavaScript or are you in full control of the HTML?

    In any case, put the iframe in some kind of container element, assign an aspect ratio to that container, and position the iframe absolutely within that container (as explained in the CSS Tricks article):


    Code:
    <div class="video">
        <iframe width="560" height="315" …></iframe>
    </div>
    Code:
    .video {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
    .video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    If you have no control over the HTML and just have iframes you can use JS/jQuery to add the containers to each iframe and use the same CSS as above.

    The jQuery way:
    PHP Code:
    $('iframe[src*="youtu"]').wrap($('<div class="video"/>')); 

  4. #4
    New Coder
    Join Date
    Nov 2012
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I was aware of the CSS solution but in this case I couldn't use it.
    @VIPStephan, your combined solution of CSS and jQuery sounds really good.
    I'm going to give it shot.
    Meanwhile I also managed to find a pure jQuery solution.
    Thanks for your help.


 

Tags for this Thread

Posting Permissions

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