YouTube Embeded – Mobile Screen

  • Resolved riderchris

    (@riderchris)


    8 years, 11 months ago

    Hi, I’ve embedded you tube videos on my site and it appears to be fine if I view them on Desktop PC as per the screenshot below. It just looks nice when someone plays it.

    However, on mobile site, the video height seems to tall and there is padding/black area at the top and bottom of the video. See the mobile screenshot below. Is there any custom css code to fix this / remove the top&bottom padding?

    Desktop: https://ibb.co/kBVf5k
    Mobile: https://ibb.co/cZ5DQk

    My youtube embedded codes as per below:

    <iframe width=”786″ height=”442″ src=”https://www.youtube.com/embed/fYmgVKVhAno&#8221; frameborder=”0″ allowfullscreen></iframe>

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author CrestaProject

    (@crestaproject)

    8 years, 11 months ago

    Hi @riderchris,
    on WordPress you can embed a video just adding the link of the video without using the iframe code.
    Try to write just the video link and let me know if it works 🙂

    Best Regards,
    CrestaProject

    Thread Starter riderchris

    (@riderchris)

    8 years, 11 months ago

    Hi,

    I presume you meant by click on Add media and enter the URL? If yes the codes will be as per below:

    [embed]https://www.youtube.com/watch?v=fYmgVKVhAno[/embed]

    If that is the case, I’m afraid it did not work. The issues is only with mobile screen. Whilst the videos play fine, there is still padding/black area on the top and bottom of the video even without the iframe code. It appears to be fine on desktop screen. We need to fix it on mobile screen.. I hope what I said makes sense..

    Theme Author CrestaProject

    (@crestaproject)

    8 years, 11 months ago

    Hi @riderchris,
    this is because your iframe has fixed dimensions ( width=”786″ height=”442″ ) and therefore on mobile the height is still at 442px.

    Try to use this plugin https://ww.wp.xz.cn/plugins/iframely/ which seems to work to have responsive iFrame.

    Best,
    CrestaProject

    Thread Starter riderchris

    (@riderchris)

    8 years, 11 months ago

    Hi, I haven’t tried the Iframely plugin but I managed to fix the issue. whilst I was reading on the plugin on their site, there is a check URL feature that I can test my link.

    https://iframely.com/embed

    When I pasted my video link, it gives me i frame responsive codes which I pasted on my site. It works fine now on all types of screen without any padding. Love it! Thanks to you of recommending the plugin, If not, I would not have tried their site. Great support and I hope others will benefit from this. Closing this now, RESOLVED!

    Theme Author CrestaProject

    (@crestaproject)

    8 years, 11 months ago

    Perfect 🙂
    Have a great day,
    CrestaProject

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘YouTube Embeded – Mobile Screen’ is closed to new replies.

Tags