Develop Reference

HTML5 videos don't autoplay with tippy js

I use tippy.js and when I add a <video loop muted playsinline autoplay> inside a tooltip using allowHTML: true, the video won't autoplay on chrome. It works on firefox and safari though.
How can I achieve this?
Here is my js:
const modal = card.querySelector('.modal'),
modalContent = modal.innerHTML`
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false
});
And here is my html:
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type="video/mp4">
</video>
</div>
</div>
I tried to add
card.querySelector('video').play()
but it doesn't work eather.
Thanks a lot in advance for your help,

It is indeed strange that a muted video would not autoplay. You can use setTimeout and then trigger play() using the onShow() event. For some reason onShown() doesn't ever fire for me.
Here's a working snippet:
const modal = document.querySelector('.modal'),
modalContent = modal.innerHTML;
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false,
onShow(instance) {
setTimeout(() => {
let video = instance.popper.getElementsByTagName('video')[0];
video.currentTime = 0; //start from begining
video.play();
}, 1);
},
});
.modal {
display: none;
}
video {
width: 40vw;
}
.card {
padding-top: 10vh;
}
h1{
display:inline;
margin:1em;
}
<!-- Production -->
<h1 class="card">CARD 1</h1>
<h1 class="card">CARD 2</h1>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type="video/mp4">
</video>
</div>
</div>

Mute the video on clicking the swiper next or swiper prev button in brightcove player

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
$(document).ready(function () {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
$(".swiper-button-prev, .swiper-button-next").click(function () {
videojs.getPlayer("overlayVideo").ready(function () {
var myPlayers = this;
myPlayers.muted(true);
});
});
});
By default I am playing the video as muted and when I unmute the video manually and click on swiper next or prev button, the video should go on mute, but currently it is happening only on clicking previous button but not muting on clicking next button. Can someone help me in achieving this. Thanks in advance

<video-js
id="overlayVideo"
You can't have two HTML5 elements or two players with the same id. You need to give them unique ids, and mute (or probably better, pause) only the specific player.

Play video on image mouseover causes trempling glitch

I am trying to play video while hovering over images at the same div in my website's img-gallery but obviously i am doing something wrong.
The supposingly hidden image over which the video should play on mouseover starts trempling.
I think its something obvious but i don't have enough experience to solve it.
Is there any idea how to hide the image at hovering for good?
Here is the code:
HTML
<div id="container">
<div class="viewer">
<img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
CSS
.viewer {
width: 530px;
height: 290px;
display:inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
JS
$(document).ready(function() {
$('.thumb')
.mouseover(function() {
$(this).hide();
var myVid = $(this).attr('target');
$( myVid ).show().trigger('play');
})
.mouseout(function() {
$('video').trigger('pause').hide()
$(this).show();
});
});
Here is also a saved [PEN]:https://codepen.io/anon/pen/oEwRJQ

The issue with your code is because you're hiding the .thumb element in the mouseover event which immediately triggers the mouseout event which shows it again. This causes a loop of hiding/showing which results in the flickering you see.
To fix this, hook the event to a parent element of both the thumb and the video. That way you don't need to use the non-standard target attribute and can instead find the related video element using DOM traversal, making the code more extensible and robust. You can also use the mouseenter and mouseleave events to prevent any possible flickering when near the edges of the hit area.
$(function() {
$('.viewer').mouseenter(function() {
var $el = $(this);
$el.find('.thumb').hide();
$el.find('video').show()[0].play();
}).mouseleave(function() {
var $el = $(this);
$el.find('.thumb').show();
$el.find('video').hide()[0].pause();
});
});
.viewer {
width: 530px;
height: 290px;
display: inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>

$(document).ready(function() {
$('.viewer').each(function(){
var $this = $(this);
$this.mouseover(function() {
$(this).find('.thumb').hide();
$('video', $this).show().trigger('play');
})
$this.mouseout(function() {
$('video', $this).trigger('pause').hide()
$(this).find('.thumb').show();
});
});
});

how can i use b-lazy plugin with html5 "picture" tag

i want to use b-lazy plugin with "picture" tag.
here default src attribute used with "data-arc" attribute. and src attribute used for lazy loading image..but how can i use this plugin picture tag...? b-lazy plugin support html5 "picture" and "img" tag.(this is support info link)but how can i implement this..
This is my html code:
here is b-lazy plugin link B-lazy plugin
<picture class="b-lazy">
<source
media="(max-width: 767px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 1024px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 1920px)"
srcset="imagepath/imgname.jpg">
<source
media="(max-width: 3840px)"
srcset="imagepath/imgname.jpg">
<img
src="img/photos/h.jpg"
data-src-small=""
alt="The Oslo Opera House">
</picture>
This is my js code:
if ($("body").hasClass("page_id_images")) {
//Global blazy module starts
var bLazy = new Blazy({
breakpoints: [{
width: 767, // max-width
src: 'data-src-small'
},
{
width: 1024, // max-width
src: 'data-src-medium'
},
{
width: 1920, // max-width
src: 'data-src-desktop'
},
{
width: 3840, // max-width
src: 'data-src-large'
}],
error: function(ele, msg) {
var image = $(ele)[0];
if (msg === 'missing') {
console.warn("Custom ERROR: ", image, " data-src is missing\n");
} else if (msg === 'invalid') {
console.warn("Custom ERROR: ", image, " data-src is invalid\n");
}
}
});
}

here is a answer for this question what i am trying to find out..
<picture>
<source
media="(min-width: 650px)"
data-srcset="image-650.jpg" />
<source
media="(min-width: 465px)"
data-srcset="image-465.jpg" />
<img class="b-lazy"
data-src="default.jpg" />
</picture>

Lazy loading wont work for responsive images in slick carousel

I have problem with lazy loading images in slick carousel. When I use devices that have screens below 980px, everything works as it should (load smaller images on demand). But when I am on screens with resolution greater than 980px it load all big images, than on demand load small image one at time.
.cshtml file
#{
Javascript.Includes.Add("views/home/home-ads-carousel.js");
Javascript.Code.Add("views.home.carousel.init();");
}
<div class="ad_carousel">
#foreach (var ad in homepageAds)
{
<div class="post__image-container">
<picture>
<source media="(min-width: 980px)" srcset="#(Configuration.URLs.MediaPath + ad.ImagePath)" />
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
<div class="carousel_text">
<h2>#ad.Title</h2>
<p>#ad.CallToActionText</p>
</div>
</div>
}
</div>
.js file
(function($) {
var carousel = {};
carousel.init = function () {
this.carouselHolder = $('.ad_carousel');
this.carouselHolder.slick({
autoplay: true,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
initialSlide: 1,
lazyLoad: 'ondemand',
//fade: true
});
}
views.home.carousel = carousel;
})(jQuery);
thanks in advance.

Can you try
<picture>
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
Instead of
<picture>
<source media="(min-width: 980px)" srcset="#(Configuration.URLs.MediaPath + ad.ImagePath)" />
<img class="post__featured-image" data-lazy="#(Configuration.URLs.MediaPath + ad.SmallImagePath)" />
</picture>
This should work!