I am trying to load videos after the page finishes loading. The script I'm using works in firefox and chrome, but throws errors in Edge/IE.
the error is SCRIPT5007: Unable to get property 'append' of undefined or null reference I get it on the full build and the line it indicates is iframe.id = v[n].getAttribute('youtube'); The issue is that it doesn't add the iframe to the page so no videos. The error on codepen is Unable to get property 'src' of undefined or null reference since the iframe is not getting appended to the page. Here is the html/js I'm currently using. I've tried a few variations like v[n].attr(). I tried changing it to data-youtube and using v[n].dataset.youtube. Nothing seems to work in Edge.
codepen working on ff/chrome
<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
<ul role="tablist">
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
<span>SteamVR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
<span>SUPERHOT VR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
<span>Free the Night</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
<span>Minecraft</span>
</a>
</li>
</ul>
<ul id="m-multi-description">
<li id="newIconItemContent13" role="tabpanel" class="f-active">
<h4 class="c-heading-10">VERTIGO GAMES</h4>
<h3 class="c-heading">Skyworld</h3>
<p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
</li>
<li id="newIconItemContent11" role="tabpanel" >
<!-- <h4 class="c-heading-10">Microsoft</h4> -->
<h3 class="c-heading">Steam®VR</h3>
<p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
</li>
<li id="newIconItemContent12" role="tabpanel">
<h4 class="c-heading-10">SUPERHOT TEAM</h4>
<h3 class="c-heading">SUPERHOT VR</h3>
<p>
The iconic VR FPS is here; time moves only when you do.
</p>
</li>
<li id="newIconItemContent14" role="tabpanel">
<h4 class="c-heading-10">JAUNT</h4>
<h3 class="c-heading">Free the Night</h3>
<p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
</li>
<li id="newIconItemContent15" role="tabpanel">
<h4 class="c-heading-10">MICROSOFT</h4>
<h3 class="c-heading">Minecraft</h3>
<p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
</li>
</ul>
<div class="c-carousel f-multi-slide" role="region" aria-label="Images">
<div class="background-skew"></div>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
<picture class="c-image">
<source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
<img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
</li>
<div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
<!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage11" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
</li>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
<!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage12" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
</li>
<div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
<!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
<img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
</li>
<div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
<!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
<img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
</li>
<div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
<!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
</ul>
</div>
</div>
</section>
//lazy load youtube vids
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.id = v[n].attributes['youtube'].value;
v[n].append(iframe);
console.log(v[n].getAttribute('youtube') + 'youtube');
}
});
// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
I ended up getting it to work by using iframe.setAttribute('id', v[n].getAttribute('youtube')); not sure why this works and not v[n].attributes['youtube'].value;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute('id', v[n].getAttribute('youtube'));
v[n].appendChild(iframe);
}
});
Related
im quite a bigginer in js and do not understand, why the following code isnt working.
JS - Code:
function videoUrl(moin)
{
document.getElementById("video_item").src = moin;
}
HTML - Code:
<section id="second">
<div id="slide">
<div id="videos">
<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>
<!-- <video class="video_item" src="videos\Road - 81676.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Skyscrapers - 80724.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Tunnel - 84938.mp4" autoplay muted loop> </video> -->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Hair - 43633.mp4')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Road - 81676.mp4')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Skyscrapers - 80724.mp4')"> </li>
<li> <img src="image\adventure-5077752_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Tunnel - 84938.mp4')"> </li>
</ul>
</div>
</section>
Output:
enter image description here
var video = document.getElementById('video');
function videoUrl(url){
video.pause();
const source = video.querySelector("source");
source.setAttribute('src', url);
video.load();
video.play();
}
<div id="videos">
<video class="video_item" id="video" width="320" height="240" autoplay muted loop controls>
<source src="https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA">
</video>
<!--<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>-->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi4210998297/1434659607842-pgv4ql-1557169076640.mp4?Expires=1633358564&Signature=kdOmIWItw1tSY3BTzVNLATmRS1RFyf1J-5HjJZPesSrxk50c02E4Mefb8z6B76i7AGsiNRmbXw5mZBn6qv6KY~Ag15voKEVK~6mxmM9N9EV52YXYzYosqK2YfuSmHE-QiwyQt3IeQ41jC1mSFXlh8uqXOXmBMx1vaRLWHU1K2toJmE1vXSycbwwtm6pARUdVnUY5rQcT0vthpdEMvZRQn~58meyUv8Ml8GWNvKZ91~N2Ivu-0czpMJFm4VL71beSXpP6N4b9fVE~1Jp6yslWPFU99o0tVb0GIb8nW6VEGo~xVC300BxDi-EkyJqVrxTq75hzMX8aOq~jM-m-A-WCGg__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://www.w3schools.com/jsref/movie.mp4')"> </li>
</ul>
i have an up loader that uploads the video which is working on all devices and OS but not the iPhone ether the chrome or safari fails to open the video any idea what might be wrong because i checked net and i came up with this solution : in ios the player loads but it does not shows the video with the below solution
<video class="video" playsinline autoplay muted loop>
i did this yet no luck . this is the link i am trying to play video on ios :
https://wishato.com/wish/wStvun
here is my code for video :
<template>
<div class="wishgallery">
<loading :display="loading"></loading>
<div class="gallery" v-show="dataLoaded">
<transition-group name="wish-gallery"
tag="div"
class="gallery-items"
:enter-active-class="enterClass"
:leave-active-class="leaveClass">
<div v-for="(item) in slideShow" :key="item.id" class="gallery-item"
v-show="item.active">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato" v-on:load="imgLoaded($event)">
<video class="video" controls v-else-if="item.mime=='video/mp4'" poster="">
<source :src="item.path" :type="item.mime">
your browser cant support this format
</video>
</div>
</transition-group>
<div class="navigator" v-if="slideShow.length > 1" :class="[{hidenavigator: navStat}]">
<span class="hideIcon" #click="hidenav">
<i class="icon icon-chevron-down"></i>
</span>
<div class="nav-items">
<div class="nav-cont">
<div v-for="(item) in slideShow" :key="item.id" class="nav-item"
:class="{active : item.active}" #click="changeImage(item.id)">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato"
v-on:load="imgLoaded($event)">
<div class="video" v-else-if="item.mime.match('video')">
<i class="icon icon-playvideo"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
I have a three buttons, Trailer, Movies and Movies Ads. I want to play the video dynamically, like when I clicked the button Trailer, then the video trailer must shown, when I clicked the button Movies, then the movie video must shown, and when I clicked the movie ads it must be shown again.
My Buttons
<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>
<button class="btn btn-sm btn-dark" id="movies">Movies</button>
<button class="btn btn-sm btn-dark" id="movieads">Movie Ads</button>
What I have right now under the video as you can see is a simple pseudo code which concludes my logic, is there any way to make this syntax achievable and working? thank you. please see my code below.
<div class="modal" id="myModal2">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="container" id='container'>
<div id="getdata" style='display: none;'>
<div class="overlay">
<br><br><br><br><br>
<div class="container">
<div class="row">
<div class="text-center col-md-12">
<div class="jumbotron" style="background-color: rgba(42, 44, 45, 0.9); color: #71777f">
<h3>Passenger Announcement is Going On.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
----------------------PSEUDOCODE HERE-----------------------------------
<?php
if (trailer == clicked) {
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}else if(movies == clicked){
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}else if(moviesAds ==clicked){
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_ads/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}
?>
</div>
</div>
</div>
</div>
</div>
You can use something like this, put all videos into html and only show them on click.
HTML,PHP:
<ul class="buttons">
<li><button target=".videos .trailer">Trailer</button></li>
<li><button target=".videos .movie">Movie</button></li>
</ul>
<div class="videos">
<div class="trailer">
<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/trailer_videos/<?= $row2['trailer_video'] ?>" type="video/mp4" size="1080">
</video>
</div>
<div class="movie">
<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_videos/<?= $row2['movies_video'] ?>" type="video/mp4" size="1080">
</video>
</div>
</div>
JS:
var buttons = Array.from(document.querySelectorAll('.buttons [target]'));
var videos = Array.from(document.querySelectorAll('.videos > div'));
buttons.forEach(function(button) {
button.addEventListener('click', function(e) {
videos.forEach(function(video) {
video.style.display = 'none';
});
document.querySelector(button.getAttribute('target')).style.display = 'block';
});
});
css:
.videos > div {
display: none;
}
I have used lightGallery plugin to play youtube, vimeo, and html5 videos. When a user clicks the image videos should play automatically.
Please check the Demo, It's working fine. But the problem is if there are two html5 videos both are playing at the same time. Youtube videos are not like that. When you click the image one youtube video will play at a time and when you slide to next video, the previous video will pause and the new video will play. But html5 all videos are playing at the same time. Please help.
$(document).ready(function() {
$('#html5-videos').lightGallery({});
});
img {
width: 220px;
height: 150px;
}
ul {
list-style: none;
}
li {
display: initial;
}
<link href="https://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.6/js/lightgallery-all.min.js"></script>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="https://sachinchoolur.github.io/lightGallery/static/videos/video4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="http://sachinchoolur.github.io/lightGallery/static/videos/video2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul id="html5-videos">
<!-- Youtube video -->
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=yp0a1oZQRVM" data-sub-html="Youtube video first">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg);">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg">
</a>
</li>
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=g4o8jfO92CI" data-sub-html="Youtube video second">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/g4o8jfO92CI/0.jpg;">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/g4o8jfO92CI/0.jpg">
</a>
</li>
<!-- Html 5 video -->
<li data-sub-html="video caption1" data-html="#video1">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/videos/h-video3-poster.jpg" />
</li>
<li data-sub-html="video caption2" data-html="#video2">
<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" />
</li>
</ul>
I found the answer on GitHub.
https://github.com/sachinchoolur/lightGallery/issues/598
https://github.com/sachinchoolur/lightGallery/issues/524
I updated lg-video.js and it's working fine.
I threw together a quick website for a friend of mine and I basically just used a query slider to manage all of the content, however when a visitor clicks play on one of his songs, it also seems to fire off the navigation (triggered by onClick). The problem is that playing the music also engages the slider and I am not good enough at JavaScript/jQuery yet to figure out how to separate the two events. Any help would be greatly appreciated.
<script>
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li ><a class="active" href="#" onClick="goto('#about', this); return false"><img src="images/bioblack.gif" width="93" height="55"></a></li>
<li><a href="#" onClick="goto('#work', this); return false"><img src="images/soundblack.gif" width="146" height="55"></li>
<li><a href="#" onClick="goto('#contact', this); return false"><img src="images/contactblack.gif" width="183" height="54"></li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>
Your html has a lot of unclosed tags, try it with a fixed and indented html:
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li>
<a href="#" onClick="goto('#about', this); return false" class="active">
<img src="images/bioblack.gif" width="93" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#work', this); return false">
<img src="images/soundblack.gif" width="146" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#contact', this); return false">
<img src="images/contactblack.gif" width="183" height="54">
</a>
</li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>
</div>
</div>
</body>
event.preventDefault() could solve your problem. Just prevent the default behavior of the button and let js fire the correct event.