0

Often people are posting Youtube videos directly into comment fields under posts, which is really a nice interaction and I have no problem with that.

My issue starts then, when I see those videos have the typical youtube iframe with over 400 px width.

Now, on a desktop website, there is no problem with that, but when you check that site on a mobile device, you see how the nice responsive theme you created just get messed up with those overlarge videos.

So I tried something like this in CSS to reduce the videos width:

.comment-meta commentmetadata iframe {max-width: 600px;} (or width: 100%;)

That did not help. All the posted videos are still larger than the site/post.

Anyone knows an easy solution without to delete all the posted videos?

4
  • Can you provide a link to an example post? Nov 11 '14 at 18:43
  • Of course, ivanschneider.com/2014/02/the-bride/ ... and if you minimize your browser window, you will see, how the video is larger than the comment field and thus breaking the design.
    – vega
    Nov 11 '14 at 18:46
  • declaring max-width: 100%; works for me. it looks like the selector in your example code is incorrect. try: .commentlist iframe { max-width: 100%; } Nov 11 '14 at 18:51
  • Ah, man, thanks a lot. Can you write it as a reply, so I can vote-close it? Thank you again, mate.
    – vega
    Nov 11 '14 at 18:55
1

declaring max-width: 100%; works for me. it looks like the selector in your example code is incorrect. try: .commentlist iframe { max-width: 100%; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.