Fitvid.js plugin causing display issues on YouTube embed

2 replies · opened Dec 28, 2016

RryearmDec 28, 2016

Hello Semicolon,

We use Surreal CMS and when we embed YouTube videos, the fitvid.js plugin is adding padding to the video wrapper, which causes display issues.
Is there a simple way to prevent fitvid.js from adding the excess padding?

Example:

<div class="fluid-width-video-wrapper" style="padding-top: 56.272%;"><div data-embed=""><iframe src="https://www.youtube.com/embed/yyLQdRS490E?rel=0" frameborder="0" allowfullscreen="" id="fitvid0"></iframe></div></div>

thank you,
RMA

RryearmDec 29, 2016

Update: this happens for any media embed: video, iframe, google maps, etc.
It adds too much top padding.

SSemicolon WebSTAFFJan 2, 2017

Hello,

There seems to be some conflict while using the FitVids. Unfortunately, the Padding cannot be controlled. However, you can consider adding the .no-fv Class to the Container that consists the Videos so that the FitVids functionality is ignored on that particular Container.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard