Problem with like button affecting all videos - javascript

enter image description here check the img please
I have videos/video info /like button that is being dynamically shown via the code bellow
My issue is that although I've givven each video its own id, they are all being clicked and incremented when the user clicks the like button.
What exactly am I doing wrong here?
Am I approaching this problem the wrong way?
What do you suggest?
-Video are appended into this container
<div class="videos"><!--video skeleton dev-->
<section class ="video-section">
</section>
</div> <!--end of video skeleton devs-->
The array which contains video info:
src: is the youtube embed " i frame data "
vcn: video chanel name
vtl: video title
lkid: like key id
iclkid: icon like key id
let javaScript = [{src: "https://www.youtube.com/embed/7UMuJMiNjSk",lkid:"vid1",iclkid:"false" , vcn: "Web Dev Simplified",vt: "Every JavaScript Developer Has Made This Mistake With Functions"},{src:"https://www.youtube.com/embed/XF1_MlZ5l6M", lkid:"vid2",iclkid:"false" , vcn: "Web Dev Simplified",vt: "Learn JavaScript Event Listeners In 18 Minutes"},
{src:"https://www.youtube.com/embed/s1XVfm5mIuU",lkid:"vid3",iclkid:"false" , vcn: "Web Dev Simplified",vt: "Learn JavaScript Array Reduce In 10 Minutes"}];
-The appending function:-
$(".batata").on("click", function () { // JAVASCRIPT RENDER
console.log("js clicked")
javaScript.forEach((item, i) => {
$(".video-section").append(`
<article class ="video-container">
<a href="#" class="thumbnail">
<iframe width="560" height="315" src="${item.src}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</a>
<div class="video-bottom-section">
<a href="#">
<img class="channel-icon" src="http:///unsplash.it/36/36?gravity=center" alt="Your Channel" />
</a>
<div class="video-details">
${item.vcn}
${item.vt}
<button class="fixButtons"onclick="showVideoOne()">View</button>
<button class="fixButtonsCounter">
<span class= ${item.iclkid} id="iconThree"><i class="far fa-thumbs-up"></i></span>
<span class = ${item.lkid} id="countThree">0</span>
</button>
</div>
</div>
</article> `);
});
});
-Like button function:-
let thumbsUp = false;
$(document).on("click", () => {
console.log("Farhan")
if (!thumbsUp) {
thumbsUp = true;
let y = 1
$(".icon55").html(`<i class="fas fa-thumbs-up"></i>`); // how do i connect this ? with ${item.iclkid}
$(".count55").text(1);
} else {
thumbsUp = false;
let x = 1;
$(".icon55").html(`<i class="far fa-thumbs-up"></i>`); // how do i connect this ? with ${item.lkid}
$(".count55").text(0);
}
});

This is the solution:
var items = [{
src: "https://www.youtube.com/embed/7UMuJMiNjSk",
lkid: "vid1",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Every JavaScript Developer Has Made This Mistake With Functions"
}, {
src: "https://www.youtube.com/embed/XF1_MlZ5l6M",
lkid: "vid2",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Learn JavaScript Event Listeners In 18 Minutes"
},
{
src: "https://www.youtube.com/embed/s1XVfm5mIuU",
lkid: "vid3",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Learn JavaScript Array Reduce In 10 Minutes"
}
];
$.each(items, function(index, value) {
$(".video-section").append('<article class ="video-container"><iframe width="560" height="315" src="' + value.src + '" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="video-bottom-section"><img class="channel-icon" src="http:///unsplash.it/36/36?gravity=center" alt="Your Channel" /><div class="video-details">' + value.vcn + '' + value.vt + ' <button type="text" class="video" id="' + value.lkid + '">View-' + value.lkid + '</button><button type="text" class="fixButtonsCounter"><span class= ' + value.iclkid + ' id="iconThree"><i class="far fa-thumbs-up"></i></span><span class="counter" id="counter-' + value.lkid + '">0</span></button></div></div> ');
})
var votes;
var id;
var counter = 0;
$('.videos').find('.counter').attr('js-vote', 0);
$(".video").on("click", function() {
id = $(this).attr('id');
counter = $(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote');
counter++;
$(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote', counter);
votes = $(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote');
$(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').text(votes);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="videos">
<section class="video-section">
</section>
</div>

Related

I have embeded videos from youtube, how to click on any images to play video?

I have embedded videos from youtube, rightdisplay div shows the images of the videos. my code is playing video after clicking only first image. i want to know if i click on any image, the video should be played in the rightdisplay div. if i click on second or other images the video is not played.
$API_key = '';
$maxResults = 10;
$api_url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q='.urlencode($query).'&maxResults='.$maxResults.'&key='.$API_key.'';
$videoList=json_decode(file_get_contents($api_url, true));
echo "<div class='left-display'>";
//$videodata = $videoList->items[0]->snippet->videoId;
echo '<iframe id="play-video" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
//echo "<br>";
//$videotitle = $videoList->items[0]->snippet->title;
//echo $videotitle;
echo "</div>";
echo "<div class='right-display'>";
echo "<h4>Up Next</h4>";
foreach($videoList->items as $item)
{
if(isset($item->id->videoId))
{
echo '<div class="youtube-video">
<div class="display">
<img id="image" width="240" height="150" src="https://i.ytimg.com/vi/'.$item->id->videoId.'/default.jpg" data="https://www.youtube.com/embed/'.$item->id->videoId.'">
<p>'. $item->snippet->title .'</p>
</div>
</div>';
}
}
echo "</div>";
?>
<script type="text/javascript">
$('#image').click(function()
{
var value = $("#image").attr("data");
$('#play-video').attr("src", value);
});
</script>
IDs have to be unique. You have multiple elements with ID image. Selecting #image gives you only the first because non-unique IDs aren't even valid. Use classes instead.
Also, in your click handler, you are yet again referring to a selector, so the attribute you get will be from the first element matching the selector and not from the one actually clicked. Use this instead.
So, to fix your issues, change id="image" to class="image" and change the Javascript code as explained:
$('.image').click(function() {
const value = $(this).attr('data')
$('#play-video').attr('src', value)
})

Sending data form javascript to servlet: getting the data about a fellow nested element next to a button

I have this simple html with a video div and a button:
<div class = "video-row">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="add-button green-button light-button">Add video</div>
</div>
I want to send a data the video's src to a java servlet on button click:
$(document).on("click", ".add-button", function () {
sendData();
});
var sendData = function() {
$.ajax({
url: "addcomedian",
type: "post", //send it through get method
data: {
number: 4,
sender: "add-button",
url: url,
},
success:
...
}
How do I get the url of the video which is the value of src tag? There would be many videos like that on a page and an add button for each video.
Find the clicked element parent, then find the iframe child:
$(document).on("click", ".add-button", function (event) {
var button = $(event.target); // Find the button that was clicked
// Find the video element, first finding the parent
var videoElement = button.parents(".video-row").find("iframe");
console.log(videoElement.attr("src")); // get the 'src' attribute
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "video-row">
<iframe width="160" height="90" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="add-button green-button light-button">Add video</div>
</div>

Adding a overlay layer on an embedded vimeo player

So Here's the video that i'm embedded to my website.
Fiddle.
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The problem is, it's small and the play and other buttons button covers the half screen.
so is there any way to add a layer image on the player and when you click on the image the video should start playing.
http://codepen.io/anon/pen/grPeyq
this is what I could come up with, you can replace the button with an image,
button is disabled until video player is "ready", this requires jquery 2.1.4
$(function() {
document.getElementById("playbutton").disabled = true;
var player = $('iframe');
var playerOrigin = '*';
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(event) {
var data = JSON.parse(event.data);
console.log(data.event);
if (data.event === "ready") {
//attach ready function to the image
document.getElementById("playbutton").disabled = false;
$('#playbutton').click(function() {
player[0].contentWindow.postMessage({
"method": "play"
}, playerOrigin);
$(this).remove();
});
}
}
});
#container {
position: relative
}
<div id="container">
<button style ="position:absolute; top:0; left:0;width: 300px;height:169px" id="playbutton">
Play
</button>
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0&api=1" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
I would offer you this solution :
http://jsfiddle.net/yehiaawad/hgtvqatm/2/
HTML
<div id="vidFrame" class="play">
<iframe id="vimeo-video" src="http://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<img id="vimeo-id" width="300" height="169" src="" />
</div>
JAVASCRIPT:
callback=?', {format: "json"}, function(data) {
$("#vimeo-id").attr("src",data[0].thumbnail_large);
});
$("#vimeo-id").on("click",function(){
$(this).fadeOut();
var player=$f($("#vimeo-video")[0]);
player.api("play");
})
CSS:
#vimeo-id,iframe{
position:absolute;
}
#vimeo-id{
cursor:pointer;
}

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

Calling Different Divs in Popup

I am working with a 3 image gallery. When you click on the images a popup appears with an iframe inside. Currently the 3 different images when clicked all show the same video in the popup. I am wondering how to call the different videos for the different images. Also, is it possible to automatically start the video so you do not have to press play when the popup appears? Thank you guys my code is as follows.
<script>
$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
<div id="videos">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder1.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
<div id="videos1">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder2.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
<div id="videos2">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder3.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
I've created a FIDDLE
There were some mistakes in your jQuery code, I've made some changes. When you click on an image you can access to the correct .login-popup like this:
var $loginBox = $(this).parent().next('.login-popup');
Try to get "inspired" and make the modifications you need to get exactly what you want.
It is also important you keep in mind that IDs should be unique in your code. Use classes if you want to give the same properties and style to multiples elements.

Categories

Resources