Canvas Support

event-single-full-width-video how to change youtube

6 replies·opened Apr 24, 2020
B
blueholdingsApr 24, 2020

Demo file : event-single-full-width-video

How to change to YouTube in the background video file?

		<!-- Content
		============================================= -->
		<section id="content">

			<div class="content-wrap">

				<div class="single-event">

					<div class="entry-image parallax overlay-right header-stick nobottommargin">
						<div class="section nopadding nomargin" style="height:600px">

								<div class="video-wrap" style="z-index: auto;">
									<video poster="images/videos/explore.jpg" preload="auto" loop autoplay muted>
										<source src='images/videos/explore.mp4' type='video/mp4' />
										<source src='images/videos/explore.webm' type='video/webm' />
									</video>
									<div class="video-overlay"></div>
								</div>
								<div class="entry-overlay-meta">
									<h2><a href="#">Ibiza: Full Moon Beach Party</a></h2>
									<ul class="iconlist">
										<li><i class="icon-calendar3"></i> <strong>Date:</strong> 31st October, 2014</li>
										<li><i class="icon-time"></i> <strong>Timing:</strong> 20:00 - 02:00</li>
										<li><i class="icon-map-marker2"></i> <strong>Location:</strong> Ibiza, Spain</li>
										<li><i class="icon-euro"></i> <strong>99.99</strong></li>
									</ul>
									<a href="#">Buy Tickets</a>
								</div>
								<div class="entry-overlay">
									<div id="event-countdown" class="countdown"></div>
								</div>

						</div>
					</div>
S
SemiColonWebSTAFFApr 24, 2020

Hello,

This is Definitely Possible and already integrated within the Templates. Simply Consider using the following code replacing the existing code to include a Youtube Video:

<div class="video-wrap" style="z-index: auto;">
&#x9;<div class="yt-bg-player" data-quality="hd1080" data-video="https://youtu.be/uTxnECbI0-U"></div>
</div>

Replace the data-video Attribute with your Youtube URL.

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.

B
blueholdingsApr 24, 2020

I applied the code, but I can't see the YouTube screen. Is there a solution?

		<section id="content">

			<div class="content-wrap">

				<div class="single-event">

					<div class="entry-image parallax overlay-right header-stick nobottommargin">
						<div class="section nopadding nomargin" style="height:600px">

								<div class="video-wrap" style="z-index: auto;">
									<div class="yt-bg-player" data-quality="hd1080" data-video="https://www.youtube.com/watch?v=vRLvvl8Ljc0"></div>
								</div>
								<div class="entry-overlay-meta">
									<h2><a href="#">Ibiza: Full Moon Beach Party</a></h2>
									<ul class="iconlist">
										<li><i class="icon-calendar3"></i> <strong>Date:</strong> 31st October, 2014</li>
										<li><i class="icon-time"></i> <strong>Timing:</strong> 20:00 - 02:00</li>
										<li><i class="icon-map-marker2"></i> <strong>Location:</strong> Ibiza, Spain</li>
										<li><i class="icon-euro"></i> <strong>99.99</strong></li>
									</ul>
									<a href="#" class="btn btn-danger btn-block btn-lg">Buy Tickets</a>
								</div>
								<div class="entry-overlay">
									<div id="event-countdown" class="countdown"></div>
								</div>

						</div>
					</div>
S
SemiColonWebSTAFFApr 24, 2020

Hello,

Apologies about the Inconveniences!

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

S
SemiColonWebSTAFFApr 24, 2020

Hello,

Thanks for your Patience!

Try this code:

<div class="video-wrap" id="youtube-bg-video" style="z-index: auto;">
&#x9;<div class="yt-bg-player" data-container="#youtube-bg-video" data-quality="hd1080" data-video="https://youtu.be/uTxnECbI0-U"></div>
</div>

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.

B
blueholdingsApr 24, 2020

It works properly.
Thank you.

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