Video module leaves black top and bottom | Community
Skip to main content
Jo_Pitts1
Jo_Pitts1
Community Manager
December 17, 2019
Question

Video module leaves black top and bottom

  • December 17, 2019
  • 2 replies
  • 2574 views

Hi there.  I'm mucking around with the video module in the starter templates.  When I embed a widescreen video from youtube, there are ugly black bars at top and bottom of the video thumbnail (i.e. letterboxing).

Does any one know how to resolve, or does anyone have an alternate piece of module code that does the same job and fixes the issue?

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

2 replies

Melanie_Martin
Melanie_Martin
New Participant
April 3, 2020

Hi,

 

I've been trying to create a video module today ad the problem actually stems from the thumbnail that is being generated from YouTube's API, e.g. it generates this 

https://img.youtube.com/vi/<video-id>/1.jpg

but we want it to generate one without the black, like this

 

https://i.ytimg.com/vi/<video id>/mqdefault.jpg

 

or

 

https://i.ytimg.com/vi/<video id>/maxresdefault.jpg

 Maybe Marketo can look into changing the default thumbnail.

Dave_Roberts
Dave_Roberts
New Participant
December 18, 2019

Hey Jo-

This most likely has to do with the proportions of the container (maybe 16x9) compared to the proportion of the video (maybe 21x9). I don't think the Marketo Starter templates are setup to handle this kind of thing, but we might be able to get away with adding some Custom CSS either to the template or via the LP Editor (under Edit Page Metatags > Custom Head HTML) that'll help address the issue.

  1. Could you let me know which template you're using from the library, and where you're adding the video? 
  2. If you've got a link to preview the approved version of the page that's showing this error, that'd also be really helpful for anyone in the community to help troubleshoot this.
  3. Are all of your videos widescreen, or do you have some that are normal and some that are widescreen? 
    If they're all a standard width, it'd make sense to update the template so that ANY video you put on the page will get the widescreen treatment. If not, it might make sense to either add this "as-needed" in the Custom Head HTML input and/or develop a toggle for the video element that'll allow you to switch between "widescreen" (21x9) and "normal" (16x9) modes.

Terms & ConditionsAccessibility statement

Loading footer...