- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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
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
add class to the iframe and give width 100%.
@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
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.
Sorry…I don’t visit random links.