Support » Theme: Hueman » YouTube video width on smartphone

  • Resolved 7kontinente

    (@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: http://7kontinente.com/leben-last-traeume/

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

    Thread Starter 7kontinente

    (@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="https://www.youtube.com/embed/NSfXolCmnFo?rel=0&showinfo=0" 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="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

    Thread Starter 7kontinente

    (@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.