Create video popup modal

[Elf_Elfynity]

Hi everyone, this topic has been done before, but not the way I am trying to do it. Here is a link to the page I am working on: https://new.pyrographix.co.za/category/projects/live-video-production/
The video popups are basically what I am trying to achieve but no need for the sliding arrows once you are in the popup: http://www.refreshanimation.com/

I have managed to create a script that closes the popup and stops the video playing:

$(‘.close’).click(function(e) {
e.preventDefault();
$(‘.video-embed’).children(‘iframe’).attr(‘src’, ‘’);
$(‘.popup-overlay’).addClass(‘display-none’);
});

$(‘a#video-button’).click(function(){
$(‘.popup-overlay’).removeClass(‘display-none’);
$(‘.video-embed’).children(‘iframe’).attr(‘src’, ‘YouTube’);
});

But, I need to have a dynamic link where the youtube link is, and the link is being drawn from a ACF custom field in Wordpress and looks like this:

<?php the_field('pop_up_video'); ?>

When I put that link in, it is not dynamically going through the posts and choosing the right link for the button you just clicked, it is only ever choosing the last video link of the loop of posts and showing that one for all the popups.
How can I make it iterate through? Here is my whole code for this piece:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="project-box">
	<div id="close<?php the_permalink() ?>"></div>
	
	
	<div class="project-box-image">
	
		
		<div class="project-box-overlay">
			<div class="project-overlay-links">
				<a id="video-button" href="#<?php the_title(); ?>" class="button-link">Play video</a>
				<a class="button-link" href="<?php the_permalink() ?>">View Project</a>
			</div><!---project-overlay-links-->	
		</div><!---project-box-overlay-->
		
		
		<div id="<?php the_title(); ?>" class="popup-overlay">
			<div id="popup" class="popup">
				
				<a class="close" href="#close<?php the_permalink() ?>">&times;</a>
				
				<div class="content">
				
				
					<?php if( get_field('pop_up_video') ): ?>
						<div class="video-embed" >
						<iframe width="800" height="400" src="<?php the_field('pop_up_video'); ?>?autoplay=0&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						</div><!---video-embed-->
					<?php endif; ?>
					
					<script>
						$('.close').click(function(e) {
							e.preventDefault();
							$('.video-embed').children('iframe').attr('src', '');
							$('.popup-overlay').addClass('display-none');
						});

						$('a#video-button').click(function(){
							$('.popup-overlay').removeClass('display-none');
							$('.video-embed').children('iframe').attr('src', '<?php the_field('pop_up_video'); ?>');
						}); 										
					</script>										
					
					
				</div><!---content-->
			</div><!---popup-->
		</div><!---overlay-->

		
		<?php the_post_thumbnail('service-box-image'); ?>
	</div><!---project-box-image-->
	
	
	<a href="<?php the_permalink() ?>">						
		<h5><?php the_title(); ?></h5>
	</a>

	<div class="post-tags">
		<?php the_tags('', ', '); ?>
	</div><!---post-tags-->
	
	<p><?php the_excerpt(); ?></p>
	
</div><!---project-box--><?php endwhile; ?><?php endif; ?>

[dram (Alex Dram)]

Please tell why the default lightbox for video wouldn’t work for you?

edit: saw your edit, no more question

Did you try this solution here for cms lightbox?

[Elf_Elfynity]

Hi Dram, what default lightbox? I don’t know what you are referring to.
ETA: I am so close, just need the jquery script line that will connect the unique post loop id to the video src in the code.

[dram (Alex Dram)]

I meant the lightbox component but since it is not dynamic I don’t think it would help. Hence the link I posted of someone creating a cms lightbox which I assume is what you are after.

[Elf_Elfynity]

I have already done the lightbox, the loop iteration and the jquery, everything is there, I just need for someone to show me how to make this piece of code here …

$(‘.video-embed’).children(‘iframe’).attr(‘src’, ‘<?php the_field('pop_up_video'); ?>’);

… link dynamically to each post in the loop iteration. I have seen $(this) being used in jquery but do not know how to implement it.

[emreelbeyoglu]

Hi,

You can easily add video popup with popup service: Popupsmart
Its free up to 10.000 page views and have lots of features.