Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with data-splide-html-video if YouTube value is used and a possible conflict with Prototype.js library #1

Closed
ADDISON74 opened this issue May 3, 2020 · 2 comments
Closed

Issue with data-splide-html-video if YouTube value is used and a possible conflict with Prototype.js library #1

ADDISON74 opened this issue May 3, 2020 · 2 comments

Comments

@ADDISON74
Copy link

Here are the steps to reproduce this conflict:

Create a folder with all css, js files inside linked in the html file bellow:

<html>
<head>
<title>Splide Example</title>
<link rel="stylesheet" href="splide.min.css">
<link rel="stylesheet" href="splide-extension-video.min.css">
</head>
<body>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider', {
                autoplay: true,
	} ).mount( window.splide.Extensions );
} );
</script>

<style>
.splide__slide img {
	width : 100%;
	height: auto;
}
</style>

<div id="image-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide" data-splide-html-video="https://www.youtube.com/watch?v=cdz__ojQOuU">
				<img src="http://i3.ytimg.com/vi/cdz__ojQOuU/maxresdefault.jpg">
			</li>
			<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
				<img src="http://i3.ytimg.com/vi/cdz__ojQOuU/maxresdefault.jpg">
			</li>
			<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
				<img src="http://i3.ytimg.com/vi/cdz__ojQOuU/maxresdefault.jpg">
			</li>
		</ul>
	</div>
</div>

<script src="splide.min.js"></script>
<script src="splide-extension-video.js"></script>
<script src="prototype.js"></script>
</body>
</html>

Please note the following observations:

  • the first list item is an YouTube video, but I am not using data-splide-youtube as for the others, just data-splide-html-video to generate the issue.

  • prototype library is loaded too.

Now load the html file created above in your browser. Click on the first list item (the one with html-video) nothing happens. Click again the image disappears and the player tries to load the content. Please take a look in the Console to see an error related to splide-extension-video.js (lines 3046 and 3072) and prototype.js (line 391). If you click more on the item the number of errors increases. If autoplay option is true the slider will go to the second item if you stop clicking.

Check the error I am seeing in Console bellow:

slide-console
@ADDISON74 ADDISON74 mentioned this issue May 8, 2020
Closed
@Splidejs
Copy link
Collaborator

Splidejs commented May 8, 2020

This is not related with prototype.js because the error occurs by just passing YouTube URL to data-splide-html-video attribute without loading the library.

data-splide-html-video must be a path or URL to the supported video file such as mp4.

@ADDISON74
Copy link
Author

In conclusion, it is very important to use the correct data-splide-* for a video source. Any mistake creates immediately a functionality error.

Many thanks for your reply.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ADDISON74