Canvas Support

issues with embedding Youtube

2 replies·opened Nov 27, 2023
K
kateboothbyNov 27, 2023

Not sure what is wrong - click on image to play video and it disappears. Google develops error shows - functions.bundle.js:7647 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
at element.onclick (functions.bundle.js:7647:8)

Can't see anything missing?

<div class="promo promo-dark promo-full mb-5 footer-stick">
<div class="row justify-content-center col-mb-80">
<div class="col-md-9 text-center mt-5">
<h2 class="dark">Why wouldn't you want to explore <span>North Devon?</h2>
<div class="video-facade position-relative" data-video-html='<iframe src="https://player.vimeo.com/video/692196422" width="500" height="281" allow="autoplay; fullscreen" allowfullscreen></iframe>'>
<div class="video-facade-preview">
attachment

        &lt;div class="bg-overlay"&gt;
          &lt;div class="bg-overlay-content dark"&gt; [](#) &lt;/div&gt;
        &lt;/div&gt;
K
kateboothbyNov 27, 2023

see attached

S
SemiColonWebSTAFFNov 28, 2023

Hello,

It appears that you would like to use the Video Lightbox but instead currently, you are using the Video Facade which is being used incorrectly. This should the correct code:

<a class="d-block position-relative" href="https://player.vimeo.com/video/692196422" data-lightbox="iframe">
	<img src="pics/things-to-do-north-devon/things-to-do-in-north-devon.webp" alt="Video">
	<div class="bg-overlay">
		<div class="bg-overlay-content dark">
			<span class="overlay-trigger-icon size-lg op-ts op-07 bg-light text-dark" data-hover-animate="op-1" data-hover-animate-out="op-07" data-hover-parent=".row"><i class="uil uil-play"></i></span>
		</div>
	</div>
</a>

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