Canvas Support

Embed a Youtube Custom Playlist as background video...?

7 replies·opened Aug 16, 2017
H
HughesDesignLLCAug 16, 2017
<div class="video-wrap">
	<video poster="images/videos/explore.jpg" preload="auto" loop autoplay muted>
		<source src='MyCoolvideo.mp4' type='video/mp4' />
		<source src='images/videos/explore.webm' type='video/webm' />
	</video>
	<div class="video-overlay" style="background-color: rgba(0,0,0,0.35);"></div>
</div>

I'd like to embed a youtube custom playlist/channel here...
How would I go about making that work instead of just a single mp4?

Thanks much!

--Jeff

H
HughesDesignLLCAug 17, 2017

I can get a regular youtube video to work fine.
It's using a playlist.

For instance: This works:

<div class="video-wrap">
							<div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-start="20" data-stop="40" data-video="http://youtu.be/A3PDXmYoF5U" style="height: 600px;">
							</div>
						<div class="video-overlay" style="background-color: rgba(0,0,0,0.35);"></div>
					</div>

if I change the video URL to something like this:

data-video="https://www.youtube.com/playlist?list=PLg2vUxIZs-eGXldHummwaDQzjhPurnm1h"

it does not...

Thanks in advance!

H
HughesDesignLLCAug 17, 2017

Just figured it out... So, sharing for anyone else who wants this.
There are several places you can pick up a "share" url from Youtube playlists.
go to the "play all" link first, and then let it start playing the first video, and grab the "share" link from there.
It will look more like this:

https://youtu.be/E-9wGghlcEk?list=PLg2vUxIZs-eGXldHummwaDQzjhPurnm1h

That's the ticket! Thanks!

H
HughesDesignLLCAug 17, 2017

Nevermind... Doesn't work as expected.

Still can use help.

lol

S
SemiColonWebSTAFFAug 23, 2017

Hello,

Thanks for your Patience!

A Youtube Playlist is definitely supported but the codes are slightly different. Please consider following the Settings from here: https://github.com/pupunzi/jquery.mb.YTPlayer/wiki#play-a-list-of-videos-from-v-250 . So you can simply change the #[playerID] from this URL to your Youtube Background ID/Class.

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.

H
HughesDesignLLCAug 28, 2017

Thanks for the info - it's close, but not quite what I am thinking...

YouTube allows users to build a custom playlist from within YouTube.
That way everything gets handled there.

Check this link:
https://www.youtube.com/playlist?list=PLg2vUxIZs-eGXldHummwaDQzjhPurnm1h

if you click to play the entire list, the link looks like this:
https://www.youtube.com/watch?v=E-9wGghlcEk&list=PLg2vUxIZs-eGXldHummwaDQzjhPurnm1h

And their embed code looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/E-9wGghlcEk?list=PLg2vUxIZs-eGXldHummwaDQzjhPurnm1h" frameborder="0" allowfullscreen></iframe>

How best to work with this?

Thanks!

--Jeff

H
HughesDesignLLCSep 1, 2017

No clues on the YouTube Playlist - just the manually generated one?

Just checking... 4 days. Thought I'd check back.

S
SemiColonWebSTAFFSep 4, 2017

Hello,

Thanks for your Patience! We definitely know about the inbuilt Playlist Functionality of Youtube but unfortunately, this is not supported by the YT BG Plugin at the moment which handles the Background Youtube Videos. The only way to run a Playlist currently is by using it manually.

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