Link Or Button Sets A Variable, Then Calls The Script
Solution 1:
@CTOverton provided what was needed, although everyone else and in Stop/Pause video when Modal is closed (not using $ sign) contributed with everything that they got me to look up as well. @Phoenix1355 actually started me on the right path despite me not posting any code at all, in turn leading me to learn so much in very little about Javascript and HTML.
This has been plaguing me for at least a week (I've lost track of time making this website), researching, getting other setups, trying overly-complicated setups, being told it can only be done by paying for a hosting plan or having to use Wordpress.. And this Console.log output, sooo helpful omg. Thank you everyone who contributed!
Here is the finished code:
<html><head><linkhref="http://www.jolanxbl.ca/snips/modal.css" /></head><body><center><br><br><br><br><br><!--List of videos--><ahref="#"class="thumbnail"><imgdata-vidcode="rLdpnu2dDUY"src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg"width="200px"></a><ahref="#"class="thumbnail"><imgdata-vidcode="hDSansxhArU"src="https://img.youtube.com/vi/hDSansxhArU/hqdefault.jpg"width="200px"></a><ahref="#"class="thumbnail"><imgdata-vidcode="duBjWlIzpzQ"src="https://img.youtube.com/vi/duBjWlIzpzQ/hqdefault.jpg"width="200px"></a></center><!-- Modal Section 1 --><divclass="bg-modal"><divclass="modal-content"><divclass="close">+</div><divclass="theVideo"><iframewidth="840"height="472"src="https://www.youtube.com/embed/rLdpnu2dDUY"frameborder="0"encrypted-media; picture-in-pictureallowfullscreen></iframe></div></div></div><script>let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with classArray.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
functionthumbnailClicked(event) {
// Event is mouse click event// target is the img (as that is what you click on)// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
//document.querySelector(".gridContainer").addEventListener("click", function() {document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/' + vidcode + '" frameborder="0" encrypted-media></iframe>';
document.querySelector(".bg-modal").style.display = "flex";
}
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickabledocument.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
</script></body></html>Solution 2:
Based on your description I think you are looking for something along the lines of the "data attribute". Data attributes are custom attributes you can assign to any DOM element that contain essentially whatever you want.
In you case if you have a page with lots of thumbnails and you want a specific action to happen when you click on a specific thumbnail, your best bet is if you store that unique identifier (the video id, or are you put it vidcode) on the element you are clicking on.
This can be done like this:
<body><!--List of videos--><ahref="#"class="thumbnail"><imgdata-vidcode="rLdpnu2dDUY"src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg"></a><ahref="#"class="thumbnail"><imgdata-vidcode="example2"src="img2.jpg"></a><ahref="#"class="thumbnail"><imgdata-vidcode="example3"src="img3.jpg"></a><script>let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with classArray.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
functionthumbnailClicked(event) {
// Event is mouse click event// target is the img (as that is what you click on)// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
}
</script></body>Solution 3:
Try passing the vidcode as an parameter for modalviewer function and then use the value.
functionmodalviewer(vidcode){
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
var showVideo = start + vidcode + end;
document.querySelector(".theVideo").innerHTML = showVideo;
};<divclass="theVideo"></div><ahref="#"id="hDSansxhArU">Click</a><script>document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer(vidcode)
};
</script>
Post a Comment for "Link Or Button Sets A Variable, Then Calls The Script"