Changing the dimensions of mktoVideo (YouTube) elements on Guided LPs

User BJ asked in this Nation thread about changing mktoVideo dimensions from the default 420 x 315.

Even though I don't typically use mktoVideo, preferring 3rd-party players, I started probing the CrowdFactory API (CF being the real name of the “Marketo Social” widget that powers video elements).

After reverse-engineering for a bit, I had working code, but obviously someone must have tried to do this before, right? Um, yeah: me. Searching the Nation, I was disturbed to find I'd posted almost exactly the same code a year ago!

At least it wasn't exactly the same code. I did do a better job today (and edited the earlier post accordingly), so my li'l memory glitch had an upside. Anyway, now it's here for posterity.

All you need to do is add a couple of variables (you could also hard-code, but this is more flexible):

  <meta class="mktoString" id="videoWidth" mktoName="Video Width" default="600">  
  <meta class="mktoString" id="videoHeight" mktoName="Video Height" default="480">  

Then add this JS just inside the closing </body> tag in the template (it has to be at the end of the page to make sure it's after the injected CrowdFactory API library, kind of like when you do Forms API stuff on a Guided LP):

  cf_scripts.afterload(function(e) {  
    if (CF.widget.currentSpec) {  
      // edit  
      CF.widget.currentSpec.filter(function(itm) {  
        return itm.type == 'CF.widget.VideoShare'  
      }).forEach(function(itm) {  
        itm.options.videoWidth = ${videoWidth};  
        itm.options.videoHeight = ${videoHeight};  
        CF.widget.restart(itm.name, itm.options);        
      });  
    } else {  
      // view                               
      [].forEach.call(document.querySelectorAll('.cf_widgetLoader'), function(itm) {  
        var options = JSON.parse(itm.getAttribute('options'));  
        options.videoWidth = ${videoWidth};  
        options.videoHeight = ${videoHeight};  
        itm.setAttribute('options', JSON.stringify(options));  
      });  
    }  
  });

In a boring nutshell, we're massaging the default dimensions on-the-fly, which depending on various conditions might happen before the video renders (great) or just after (acceptable). Anyway, it gets the job done. As far as I know, there's no other way to do this, other than trying to manipulate <iframe> and <video> element dimensions after they're drawn, which is definitely not easier.

What about responsiveness?

Good question: I find the video markup actually is responsive to a degree, treating the width x height like max-width x max-height. If you want full control, this is up to you to do using media queries. For example, you could have the ${videoWidth} actually be a list of alternate dimensions ("400,640,800") for different breakpoints. Split that into an array and switch on viewport properties. Enjoy that adventure!