Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS iframe doesn't re-size on responsive site

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #176200
    tonylynn65
    Participant

    Hi

    I’m working on a site for a friend that has three columns each with an embedded YouTube video and a block of text. At the media query breaks the content re-positions fine but as the viewport gets smaller (in between media queries) the videos get closer together until the eventually overlap.

    I’m using

    <iframe src=”//www.youtube.com/embed/u_9BzFMf1oU” height=”157″ width=”280″ allowfullscreen=”” frameborder=”0″></iframe>
    `

    Changing the width and height values to % doesn’t make any difference unlike img attributes

    Is there a simple solution to this?

    #176203
    Paulie_D
    Member

    We’d need to see the actual page but you might want to look at this

    https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    #176208
    tonylynn65
    Participant

    site is here

    Looks to me like the wrapper solution is the most appropriate as there aren’t hundreds of videos and he isn’t likely to be uploading loads in the future

    Thanks for the help – will try it tonight

    #176211
    Mehul Golania
    Participant

    add class to the iframe and give width 100%.

    #176216
    Paulie_D
    Member

    @Mehul Golania

    Above won’t work…check out the article I linked.

    Our little 100% width trick isn’t going to help us when dealing with video that is delivered via iframe. Setting a height is required, otherwise browsers will render the iframe at a static height of 150px, which is far too squat for most video

    #176221
    Mehul Golania
    Participant

    @Paulie_D

    Hi friend,
    i have used this let me show you the example.
    please visit link.
    http://posteshare.com/html/v4/

    Check there is one post which have iframe.

    if you will no apply the height to the iframe then it will 150px; but when you apply the height with 100% width your video will be responsive but you video will not get starch.

    so might be it will helpful to you.

    #176225
    Paulie_D
    Member

    Sorry…I don’t visit random links.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.