Multiple Videos on one landing page

[sliang20]

First time posting and new to Marketo -- has anyone had luck with creating a landing page with multiple videos? I started with a guided landing page and can't seem to find where to repeat/duplicate the video module. I'm wondering if I need to use a free form landing page template. 

[SanfordWhiteman]

Guided LPs aren't module-oriented in the way you may think. You'd need another  mktoVideo.

[Dave_Roberts]

Well.....not exactly modular like Email maybe, but there's no reason someone couldn't build out a Module Library that works in a modular way to compliment a Guided Landing Page template 😉

[Dave_Roberts · Accepted solution]

In general, you'll want to use Guided Landing Pages instead of Free Form landing pages. The Free Form LP option is a legacy option for building pages so it still exists, but the Guided Pages are more capable and as far as I know there isn't anything you can't do on a Guided page that you could do on a Free Form page, albeit the editor experience is a little different.

The way video stuff works on the Guided LPs is by including a video container (mktoVideo) in your LP template. This is what populates the area in the editor that allows you to add a video element. If you wanted to add more videos in more places, you could edit the LP template to include new "mktoVideo" containers in different spots on the page. Here's a link to the Marketo Docs on the video containers for LPs: https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template#CreateaGuidedLand...

Beyond using the "plug-n-play" video container, you can also add video to any HTML section by using the embed code you'd get from a service like YouTube. By default, this'll be fixed in size (based on the iFrame) but you can add your own video container around the video to handle the responsive behavior. 

I use Bootstrap a lot in my builds and they've got a handy container that works for this purpose, here's a look at the code I use with Bootstrap 4.5, I think the "embed-responsive embed-responsive-16by9" classes are backward compatible to Bootstrap 3.X as well. You'll find more info on the embed-responsive container at Bootstrap here: https://getbootstrap.com/docs/4.5/utilities/embed/

<div class="embed-responsive embed-responsive-16by9 mb-3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/y2Ky3Wo37AY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
           
              

*Note the width and height parameters on the iframe don't really matter in this context, the "16by9" part of the container class is what proportionally sizes the iframe inside the container.