Youtube Iframe Not Responsive

[Pete_Jones]

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?

[Casey_Grimes]

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]

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]

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/

[Pete_Jones]

Well, I mean using the last version Courtney suggested leaves me with a desktop version that is just about the same size as that on mobile. It is too small.

[SanfordWhiteman]

Try my code w/matchMedia, should do the trick.