Resize media players

Hi guys,

I’m trying to find the best way to make beans resize my media players.

I’m currently adding Youtube and Soundcloud links via the "add media" button in Safari and the iOS Wordpress app and at the moment the players are too narrow, not responsive and break the layout on mobile.

I want the players to use the full post width on desktop and resize proportionally on mobile.

I have only found some workarounds on the wordpress forums where you add some divs and custom css in each post. Is there a way to do this without needing to add extra code each time? Because I want to use the iOS wordpress app to quickly create posts.

Hope you can help 🙂

cheers!

Hey Thomas,

You could simply make the iframe 100% wide by adding the following CSS to your child theme:

.tm-oembed iframe {
  width: 100%;
}

Happy coding,

Thanks Thierry,

that was easier than expected 🙂 Now the players have the right width.

But the height stays the same when I resize and on mobile the players have a portrait format. Is there a way to make it resize proportionally?

Thanks again for your help!

You need to set $content_width in your theme.

I use that snippet in my themes functions.php:

// Set content_width for images and oembed like Youtube
if ( ! isset( $content_width ) ) {
 $content_width = 705;
}

adjust the "705" to your needs.

j0e

Hey Joe,

thanks very much for your help. But I think I’ll stick with

.tm-oembed iframe {
    width: 100%;
}

because it allows the content to resize.

My problem however is that the height of the player doesn’t resize proportionally together with the width. Like it does with images. Still haven’t figured that out yet.

Thanks again

What you need is exactly the snipped I showed you before. It's the WordPress way to responsively resize oembeds.

WP will adjust the width and height for you. Just try it 😉

Hm, I tried again but it still does’t resize. Not even the width.

You can check it out here: /removed/

I also removed the iframe css. Maybe I’m missing something?

Hey guys,

A "traditional" way for making video responsive 16:9 format is using the following CSS:

.tm-oembed {
  position: relative;
 padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.tm-oembed iframe {
  position: absolute;
 top: 0;
 left: 0;
  width: 100%;
  height: 100%;
}

This may not suit everycase though, depending on your needs another approach would be to use @media CSS query to set your image dimensions for each responsive breackpoint.

Have fun,

I found the WP article: https://codex.wordpress.org/Content_Width

Hi guys,

thanks so much for the CSS Thierry. This worked for me. I will try the breakpoint solution as well.

And thanks for the link Jochen. I couldn’t get it to work yet but I will try again 🙂

cheers guys