YouTuve video appearing after large gap

  • Bharat Karavadra

    (@bharatk)


    11 months, 3 weeks ago

    Hello,
    When adding a YouTube URL to the editor to display a video, there is large padding on this page above the video which disappears when the video is started. See screen recording here: https://a.cl.ly/d5uDd5P1

    The padding appears in Chrome and Firefox browsers. I’ve deleted the block and added it again and the padding remains.

    Can anyone help with why the padding appears and how can it be removed?

    Thank you,
    Bharat

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Takashi Irie

    (@iamtakashi)

    11 months, 3 weeks ago

    Hi @bharatk, I can’t reproduce the issue on my site with TT3. The markup around the embed is different from the default. Do you use any plugin? What happens if you temporarily disable all the plugins? Does it solve the issue? If you can activate a plugin at a time, it should become clear which plugin is causing the trouble. Let me know how it goes.

    Thread Starter Bharat Karavadra

    (@bharatk)

    11 months, 3 weeks ago

    @iamtakashi thank you for looking into this.

    I switched off the plugins and one made a difference which was the WP Code Lite plugin.

    However, it doesn’t seem to the plugin itself that is causing an issue but more so a JavaScript embed in the body of pages (the plugin allows adding of scripts to the header, body and footer).

    It’s specifically the following script causing the issue which is from VBOUT and is required to use their website tracking features:

    <script type="text/javascript">
/* embed code starts */
var _vbset = _vbset || [];
_vbset.push(['_account', 'VBT-46847-4008']);
_vbset.push(['_domain', 'https://karavadra.net']);

(function() {
	var vbt = document.createElement('script'); vbt.type = 'text/javascript'; vbt.async = true; 
	vbt.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.vbt.io/tracker?_account='+_vbset[0][1]+'&_domain='+_vbset[1][1];var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vbt, s);
})();
/* embed code ends */
</script>

    I can’t see how this is affecting the padding, and before I contact VBOUT, do you have any suggestions?

    Thank you,
    Bharat

    Takashi Irie

    (@iamtakashi)

    11 months, 3 weeks ago

    I’m not sure exactly what that script does, but the markup around the video thumbnail has been altered to something WordPress doesn’t expect, and that’s causing the big gap.

    You can try adding this custom CSS to your embed block.

    .wp-block-embed .wp-block-embed__wrapper div.default, .wp-block-embed .wp-block-embed__wrapper div.fadeIn {position: absolute !important;}

    Go to the site editor (Appearance > Editor) and click the editor, and follow these steps to add the style rule.

    Let me know how it goes!

    Thread Starter Bharat Karavadra

    (@bharatk)

    11 months, 3 weeks ago

    @iamtakashi that worked. The gap has disappeared. Thank you for your help. It’s appreciated.
    Bharat

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘YouTuve video appearing after large gap’ is closed to new replies.

Tags