Youtube Video Embed is not Mobile Responsive

  • Im using hueman theme for over 2 years and it has been a very useful one to me. Recently i have created a songs lyrics based website which i use youtube video as an element inside the single-songs.php file. When im using the same in desktop, it is working fine and when im viewing it through mobile, the video is going a little away from content pad to the right.

    Please anyone help me on this. my site is here

    The link is used youtube video is Here

    • This topic was modified 7 years, 5 months ago by vtlaxan.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter vtlaxan

    (@vtlaxan)

    @bdbrown im looking forward for your support

    I have notified them about this issue a year ago and it still remains unfixed.

    Their reason is as long as you dont set the limit of the size for (youtube) video, it will render. However there is other video platform out there that you may need to embed in the site that has size limits , it wont render well. I really hope developer can fix this issue once for all.

    Sometimes, I want to embed a series of video from a thread to my site, I had to copy the embed code one by one. If this theme doesnt have this issue, I can simply copy them with copy and paste hotkey and thats it.

    This will work – https://www.youtube.com/watch?v=HtVPPFCmFUo

    but this wont – <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/HtVPPFCmFUo&#8221; frameborder=”0″ allowfullscreen></iframe>

    You get the point.

    This is really inconvenience bug. Hope developer can get it fixed in next update.

    This is what I do as a workaround to make videos fit the device I am using.

    In my child theme style.css, I put 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%;
    }

    Then I add this at the start of my embed.

    <div class=”video-container”>

    And this at the end.

    </div>

    Like so:

    <div class=”video-container”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/HtVPPFCmFUo” frameborder=”0″ allowfullscreen></iframe></div>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Youtube Video Embed is not Mobile Responsive’ is closed to new replies.