YouTube video width on smartphone

Okay so it looks like we need to make the video mobile responsive so this is what we’re going to do.

1: Login to your WP-Admin

2: Go to Appearance > Editor

3: Scroll down to the Style.css file

4: Add the following code:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

5: Now we’re going to go back to your original post where you’ve embedded this iframe. Highlight the entire iframe and replace it with the following code.

<div class="video-container"> 
<iframe width="560" height="315" src="https://i.ytimg.com/vi_webp/NSfXolCmnFo/sddefault.webp" frameborder="0" allowfullscreen></iframe> 
</div>

If you’ve used a plugin to embed this video then you can just disable this plugin and paste this directly in the text area of your page.

Freddie

Hej Freddie

Nope, that doesn’t work well.
I did the first part with the css. How should the replacement of the code work, if there is not my video inserted?

Current video code is:
<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/NSfXolCmnFo?rel=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

• This reply was modified 8 years, 3 months ago by Igorowytsch.

Hi @7kontinente,

The embed code you shared has “width” parameter set to 560px. That’s why it’s going beyond the border of your iPhone. Can you try replacing “560” with “100%” ? So you should be using the following code:

<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/NSfXolCmnFo?rel=0&showinfo=0" width="100%" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

This will make the video responsive and width will adjust to full content area regardless of screen size.

Have a nice day. Cheers!
Rupok

Thanks Rupok, that was it!
Awesome support here!

Best regards!

Sorry! I found this code on another site and didn’t notice it wasn’t 100% width good catch @rupok