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

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

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