How to change default width parameter of embedded video in wordpress?

Question

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% ?

Answer 1

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>