Support » Theme: Hueman » YouTube video width on smartphone

  • Resolved 7kontinente


    Hej there

    What do I have to do that a YouTube video is automatically set to the right width?
    If you take a look on this here:

    On my iPhone, the video is to wide and i almost don’t see the play button. Is that only on my phone like that or do you see the same issue? Is that possible to change?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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="" frameborder="0" allowfullscreen></iframe> 

    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.


    Thread Starter 7kontinente


    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="" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

    • This reply was modified 4 years, 4 months ago by 7kontinente.

    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="" 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!

    Thread Starter 7kontinente


    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘YouTube video width on smartphone’ is closed to new replies.