3

I am using embedded video short code of Wordpress for showing video in the content of a post

[embed width="600" height="456"]https://www.youtube.com/watch?v=f5CcOq8UzkI[/embed].

and the rendered html is

<iframe width="600" height="338" src="https://www.youtube.com/embed/f5CcOq8UzkI?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

I found it really nice and cool. It works great.

The only problem is video is not responsive because this takes width in px.

Is there any way to change the width parameter from px to % like 100% ?

  • you should have included in your question the rendered html of that :) – Reigel Mar 28 '15 at 6:47
  • I edited my question with rendered html of shortcode – Vijay Lal Mar 28 '15 at 6:53
2

if you could make it to something like this:

<div class="videoWrapper">
    <iframe width="600" height="338" src="https://www.youtube.com/embed/f5CcOq8UzkI?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>

then responsive css for that would be like this:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

if you have no control on the markup, then what we can do is when you put that shortcode in the editor, add some div around it like this:

<div class="videoWrapper">
    [embed width="600" height="456"]https://www.youtube.com/watch?v=f5CcOq8UzkI[/embed]
</div>
  • OMG, ok its really have solved my problem of responsive video. But I was expecting some action and filter on the function of media.php and some custom code to override px to %. Finally I am happy. – Vijay Lal Mar 28 '15 at 7:21
  • 1
    WordPress does provide a filter — in the form of embed_defaults — to modify the width and height attributes of oEmbeds, but it requires the sizes to be integers, not string values. – rjb Jan 4 '17 at 4:12

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.