We Keep Coding

How can I load iframe after function .overlay?

I have two functions I want to happen, load iframe only after the clicking (not all iframes, just this one - per click) using the .overlay. There are multiple .overlays and iframes on the page.
I have checked out various sites and these work alone but I can not get both to work together.
overlay:
$(function() {
$("span[rel]").overlay();
});
iframe code option 1:
$(function() {
$('.overhover').click(function(e) {
e.preventDefault();
var iframe = $(this).next();
iframe.attr("src", iframe.attr("data-src"));
});
iframe code option 2:
$(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
My Code:
Test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
<!-- Actual code -->
<div class="res-item">
<h4>Header</h4>
<h2>
<!-- Overlay Link -->
<span class="overhover" rel="#tool3">Title
</span>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe seamless="" data-src="http://www.bing.com" style="width:100%; height:75vh;" frameborder="0">
</iframe>
</div>
</div>
css not included here.
Thanks,
Load iframe:
Load IFRAME onClick
and
Is it possible to not load an iframe in a hidden div, until the div is displayed?
.overlay
http://jquerytools.github.io/demos/overlay/index.html

Based on your "Actual Code", this is what I would do:
EDIT
I've modified the code so it actually does what you want. Also, modified your "original" code slightly for demonstration purposes.
$(function() {
var toolID;
$("span[rel]").on('click', function() {
//so we get the ID of the tool we'll be loading later
toolID = $(this).attr('rel');
}).overlay({
onLoad: function() {
var ifSrc = $(toolID + ' iframe').attr('data-src');
$(toolID + ' iframe').attr('src', ifSrc);
$(toolID + ' iframe').show();
}
});
});
.simple_overlay iframe {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<div class="res-item">
<h1>Header</h1>
<h2>
<!-- Overlay Link -->
<ul>
<li><span class="overhover" rel="#tool3">Bing</span></li>
<li><span class="overhover" rel="#tool4">Duck Duck Go</span></li>
</ul>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe data-src="https://bing.com" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
<div class="simple_overlay" id="tool4">
<iframe data-src="https://duckduckgo.com/" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
</div>
You can take it from there, and modify it to suit your needs. Also, notice that bing's protocol is https, not http. If you use the latter, nothing will load in the iframe.

Uncaught TypeError cannot set property 'src' of null onclick

I am trying to have a light box pop up for videos. it works fine with one video. When trying with multiple videos the 2nd video link dont work. When clicked I get Uncaught TypeError cannot set property 'src' of null.
Nothing happens when clicked but video1 starts in the background you cant see it only her the sound. Any help is appreciated.
here goes JS
// Function to reveal lightbox and adding 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';
}
here goes html
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>

I think your problem here is that you're using IDs multiple times.
You got id="playme" on both anchor-tags and id="video" on both lightbox-divs.

So yeah. First, you should really only need a single video player -- simply change the src of that player and it should do what you want. The following is messy and ugly and really not the way i'd necessarily do this, but it works. Rather than having multiple lightbox/player elements, there's one. When you click the link, the onClick passes an id, which is matched against an array of objects. If a match is found, it changes the src of a SINGLE video-player element to the matched src and displays it.
From what I'm reading, this may be closer to what you're looking for.
var arrayOfVideos = [{
id: 'youtube',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}, {
id: 'youtube2',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}];
// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
// This just shows what we're displaying, purely for debugging.
console.log("Showing the video "+video_id);
// We have a single videoplayer div. We'll simply toggle its src.
var video = document.getElementById("video-player");
// All possible links have been saved as an array of ids and src properties.
// Here, we simply get the first element with the matching id
var videoObject = arrayOfVideos.filter(function(obj) {
return obj.id === video_id;
})
video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
var video = document.getElementById("video-player");
var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
video.src = cleaned;
document.getElementById(div).style.display = 'none';
}
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
</div>
</div>
</div>
</div>

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});

Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});

If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");

Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

change innerhtml javascript

I'm new to javascript and can't figure out the best way to solve this problem.
I have a div called info.
I have dozens of videos, and am constantly adding new videos.
When I click a video, I want to update info.
So I was thinking I need a hidden div with the text, and getElementsByClassName for something like this:
<div class="video"><a href="./video1.mp4" target="videoplayer" onclick="showDescription()><div class="description"><p>description for video1</div>
<div class="video"><a href=./video2.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video2</div>
<div class="video"><a href=./video3.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video3</div>
and
function showDescription(){
var description = this.getElementsByClassName("description");
document.getElementById("info").innerHTML = description;
{
That doesn't work. Is using getElementsByClassName a good way to do this, or can anyone suggest another way?
Here's the actual html I'm using:
<div id="videoplayer">
<iframe name="VideoPlayer" width="80%" height="100%" src="http://www.youtube.com/embed/videoseries?list=PL5A2FB27789F71E63> </iframe>
</div>
<div id="info">
<p>Welcome</p>
</div>
<div class="thumb"><p>
<img src="http://discolemonade.com/roku/images/thumbs/MusicVideos/MV-ThumbSmallPlaylist.jpg">
Hours of music videos, refreshed often.
</p>
<div class="longinfodiv">
<p class="longinfo">this is the long version of the music video playlist info</p>
</div>
</div>
And the javascript:
function changeInfo() {
var longinfo = document.getElementsByClassName("longinfo");
document.getElementById("info").innerHTML = longinfo;
}

First structure your HTML file properly:
<div class="video">
Link
<div class="description">description for video1</div>
</div>
Then use the following script:
function showDescription(){
var video = this.parentNode;
var desc = video.children[1];
document.getElementById("info").innerHTML = desc.innerHTML;
}

Youtube video slideshow stop video on click

I have a youtube video slideshow which gets populated with the use of a template:
<script id="tFlowplayer" type="text/html">
<div class="rv" id="{{name}}">
<iframe class="{{id_v}}" width="575" height="323" src="{{id_v}}" frameborder="0" allowfullscreen></iframe>
</div>
</script>
when I click on next or prev I need to stop the current youtube embedded video playing:
<nav class="arrows">
<button data-goto="prev" class="arrow arrow-left" rel="prev">Prev</button>
<button data-goto="next" class="arrow arrow-right" rel="next">Next</button>
</nav>
The following is the click event for the navigation, I guess this where the action will be happening:
$('[data-goto]').on('click', function (evt) {
var $this = $(this),
where = $this.attr('data-goto'),
video_id = $('[data-play]').attr('data-id');
if (where === 'prev') {
swiper.prev();
} else {
swiper.next();
}
});