Youtube Iframe Not Responsive | Community
Skip to main content
Pete_Jones
Pete_Jones
Level 2
September 26, 2018
Question

Youtube Iframe Not Responsive

  • September 26, 2018
  • 1 reply
  • 3437 views

I added the iframe from a Youtube video that has set height and width dimensions. It looks great on the Marketo landing page on the desktop, but not on mobile. I've read I can set the height and width to 100% to make it responsive to the device it is played on, but that left me with a very odd sized image on desktop and a great experience on mobile.

What is the best recommendation for adding a youtube iframe to a landing page to ensure the best experience on desktop and mobile?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Casey_Grimes2
Casey_Grimes2
Level 10
September 26, 2018

Hi Pete,

Assuming you're using guided landing pages and not desktop/mobile free-form landing pages, I'd probably just use one of the out of the box solutions like FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds​ (or one of its vanilla JS forks like GitHub - webcraftsman/vanilla-fitvids: A fork of Dave Rupert's FitVids.js without any frameworks. )

Alternately, you can use a small web app like embedresponsively.com to generate your embed code.

Pete_Jones
Pete_JonesAuthor
Level 2
September 26, 2018

I am just surprised Marketo's landing page does not make the iframe responsive - to be honest. I have tried your last suggestion above but still have the same issue. This time their code lookes great on mobile but not on desktop. I can't seem to get the same experience on each platform.

SanfordWhiteman
SanfordWhiteman
Level 10
September 26, 2018

I can't seem to get the same experience on each platform.

Well, it's never going to be the same experience.... anyway, you might read this old blog post about changing the dimensions of the native Marketo widget. You'll have to add your specific breakpoint(s) accordingly, the code doesn't do that for you: https://blog.teknkl.com/changing-the-dimensions-of-mktovideo-youtube-elements-on-guided-lps/

Terms & ConditionsAccessibility statement

Loading footer...