Develop Reference

I need to replace the div that contains youtube video with the previous state when the user scrolls beyond that div while playing video

thank you so much for taking time to look in to this issue .
I have a page where it contains multiple videos from youtube , i want to replace that video content with the image whenever the user scrolls down beyond that div , it is working fine for one video but when there is multiple videos it is taking the image of last video for all the videos .
Here is my initial html :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<img src="/sites/default/files/image2.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
Let's say for example if user plays the video 1 the html becomes like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/s6OusrTxwxA?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
So if users scroll's down while playing the video , i want replace that video with the image for that specific div similar to like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
Here is my jquery :
$(document).ready(function() {
$('.main-paragraph').each(function() {
let old_html = $(this).find('.video-content').html();
// Stop playing the video and show image when scrolled past.
$(window).scroll(function() {
$('.video-content').each(function() {
let windowScroll = $(window).scrollTop(); // how many pixels you've scrolled
let containerDistance = $(this).offset().top;
let containerHeight = $(this).height(); // height of container in pixel
// If you've scrolled further than the top of the container + it's height
// stop the video.
if (windowScroll > containerDistance + containerHeight) {
$(this).html(old_html);
}
});
});
});

I would like to recover an id and insert it into several src, to avoid repeating

I want to retrieve "id" from each post to use in various places inside the post.
How can I achieve that?
$("a").attr("onclick", function() {
return "changeVideo('" + this.id + "')";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-.jpg";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-preview.mp4";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div title="First Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[Retrieve the id from the first post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the first post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the first post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div title="Second Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[retrieve the id from the second post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the second post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the second post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>

I think the key here, is to loop through all the .post... And there is 3 attributes to set for each.
See comments in code.
// Loop through each post
$(".post").each(function(){
// Get the id
var id = $(this).data("id");
// Set the anchor's onclick
$(this).find("a").attr("onclick","changeVideo('" + id + "');");
// Set the poster and src
$(this).find("video").attr({
"poster":"https://WebSite" + id + "-.jpg",
"src":"https://WebSite" + id + "-preview.mp4"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="A-DIFFERENT-ID-FOR-FUN">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
The id you look for is in a data- attribute in the .post element's markup. It also is the parent of the element you wish to "update"... So it's a good starting point to retreive the id and .find() the childs. An .each() loop is the best way to process them all correctly.

In your functions, this refers to the element to which you've bound the function.
Here's a demonstration:
$("video").attr("poster", function() {
console.log("This refers to: " + this);
console.log(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video></video>
But it seems that you want to get the id attribute from the containing <div> for each post.
I suggest that you assign each post <div> a class of "post".
Then you can select the desired post from within your functions by using jQuery's closest().
<div class="post" ... >
I recommend that you use a data attribute like data-id rather than the id attribute,
since the id attribute has its own specific purpose.
<div class="post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677" ... >
I recommend removing the <a> elements and binding a click handler directly to the .thumb elements. That way you simplify your HTML structure and don't need the inline onclick="" attributes.
Here's a working example:
$("video").attr({
'poster': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-.jpg";
},
'src': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-preview.mp4";
}
});
$(".thumb").on('click', function(e) {
e.preventDefault();
var id = $(this).closest('.post').data('id');
changeVideo(id);
});
function changeVideo(id) {
console.log('Changing Video: ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="a-different-video-id">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
That results in a structure like this:
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted="" poster="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-.jpg" onmouseover="this.play()" onmouseout="this.pause()" src="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-preview.mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
And jQuery has bound a click handler to each .thumb, which will pass the appropriate data-id to the changeVideo() function.

Wrap image inside div with other divs

There is an Image coming from server:
<div class="storyDetail">
<img src="img/photo.jpg" height="180" width="300" style="float:left;">
</div>
Now I want to change this image like this through javascript when page loads:
<div class="storyDetail">
<div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>
</div>
I have tried through Javascript but got nothing because I am not fimilier with Javascript!

I just got the answer with the help of MR.#sinisake.
<!-- Getting Image 'Src' -->
var storyDetailImageSrc= $('.storyDetail').find('img').attr('src');
<!-- Wrapping image with required div(s) -->
$('.storyDetail img').wrap('<a href="'+storyDetailImageSrc+'" class="tt-lightbox">');
$('.tt-lightbox').wrap('<div class="insta-gallery">');

To change text:
Add an id to your div:
<div class="storyDetail" id="storyDetail01">
Define a function:
function changeText {
document.getElementById("storyDetail01").innerHTML =
' <div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>';
return false; }
Place that function wherever you execute Javascript when loading your page.
If not sure about what you do to that purpose, but the easiest -and dirtiest-, is to add a scirpt at the bottom of the html
<body> -> that's your html page body
--- code code...
<script type="text/javascript">
changeText();
</script>
</body>

How to find a video element within an owl-carousel slide and then set owl-carousel control's css only for that specific slide

I wrote this to find a video element within an owl-carousel slide and then set owl-carousel control's CSS only (this control appears on runtime of webpage) for that specific slide.
The code is not working at all, I'm new to use js.
$(".item").children().find("video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
For the HTML
<div id="post-media" class="owl-carousel item-2">
<div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
<div class="item">
<video controls="" class="embed-responsive-item" style="width:100%; height:100%">
<source src="video/clip1.mp4" type="video/mp4">
</video>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
</div>

If you only desire shifting the position of owl-controls no need for jquery. You can use CSS only:
.owl-carousel .owl-controls
{
margin-top:10px;
}

If you know css3, you can use same queries with jQuery
$(".item video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});

JQuery Slider - OnClick Play Wide Video

I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.
The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.
If image in position 1 is clicked, I want to play video_1 in the player, and so on.
The URL of video will be in this format <source src="videos/video_1.mp4"
Here is my markup
<body style="background-color: #0094ff">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<video width="640" height="360" controls id="player">
<source src="videos\video_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row">
<div class="col-md-12 slider">
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
})
$('.slider').on('click', '.slick-slide', function () {
alert("Slide clicked");
//how can I show the video with the position of the clicked slide?
})
</script>
</body>
How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?
UPDATE
Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.

To answer your question exactly do this:
$('.slider').on('click', '.slick-slide', function () {
var index = $('.slider').slick('slickCurrentSlide');
$('#player source').attr('src', 'videos/video_'+index+'.mp4');
})
But better control would be:
Add a data-video to each img tag:
<div class="col-md-5 col-xs-3">
<img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>
You can then swap out the video like so:
$('.slider').on('click', 'img', function () {
var data = $(this).data(); // Grab data from IMG
$('#player source').attr('src', data.video);
})