Re: Are local YouTube video assets constrained to a defined size?

Dan_Stevens_ · ‎12-18-2015

We're building a guided landing page template that includes a section where we can swap in and out different video (using Marketo YouTube video assets). But when we add the video to the page, the aspect ratio - or more specifically, the video player, is significantly smaller than the source video. Our desire is to display this on the page just as it does within YouTube (e.g., widescreen).

Here's the source video on YouTube:

And here's how it looks when we create the video asset in Marketo:

Are we limited to this player size once we place it on our landing pages? I'm assuming the additional top (where the title of the video is contained) and bottom (video controls) aren't customizable to look more modern like what is contained on YouTube. We dislike the letterbox when it's not necessary.

Anonymous · ‎12-18-2015

When you drag the video onto the landing page, you can resize it there. You can also resize in the HTML

Dan_Stevens_ · ‎12-18-2015

There is no way to resize a YouTube video asset on a guided landing page. Furthermore, there's no way to access the HTML when you're using a template. If you have some insight that I'm not aware of, can you please share? Keep in mind, this is on a GUIDED LP, not traditional (where you can resize it by dragging the handles).

JD_Nelson · ‎08-05-2016

wondering if you ever figured this out? I'm having the same issues.

SanfordWhiteman · ‎08-05-2016

Try this:

<meta class="mktoString" id="videoBottomWidth" mktoName="Video Width" default="600">
<meta class="mktoString" id="videoBottomHeight" mktoName="Video Height" default="480">

and this:

<div class="mktoVideo" id="videoBottom" mktoName="Video Bottom">
</div>
<script>
  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 = ${videoBottomWidth};
        itm.options.videoHeight = ${videoBottomHeight};
        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 = ${videoBottomWidth};
        options.videoHeight = ${videoBottomHeight};
        itm.setAttribute('options', JSON.stringify(options));
      });
    }
  });
</script>

JD_Nelson · ‎08-05-2016

does that go in the template, or on the page somewhere after I've dropped in the youtube element?

SanfordWhiteman · ‎08-05-2016

In the template.

I show the helper script after the <div class="mktoVideo"> video container, but really you just need to make sure it runs after the CF widget loader (loader.php.js) as been loaded, and the loader is placed at the end of the <HEAD>.

Putting it after the mktoVideo takes care of that requirement, but technically, the script could be anywhere, as long as the variable cf_scripts exists before we look for it.

Anonymous · ‎09-28-2017

Have you noticed this fix not working in Chrome? It works in IE for me but not Chrome when previewed. It does seem to work in the editor in Chrome though.

JD_Nelson · ‎09-28-2017

I've switched away from marketo's youtube player and implemented Digital Pi's tracking player. It is fully responsive, has controls for what does and doesn't appear on the video (player controls, etc), and can track how much of the video people watch -- it's fantastic!

Track YouTube Videos in Marketo | Digital Pi

Anonymous · ‎09-29-2017

Works great, thanks JD!