Javascript using element ID to play video

[Russinating]

I'm not adept at Javascript and I need to play a video on the click of an element based on its ID.

The page is at jonesmillbank.com/our-clients/newmarket. The current JS is unique to each element, for example:

<script>
$(document).ready(function(){
	$("#rhine").click(function(){
	$("#hiddenvid").show(50);
	$("#hiddenvid iframe").attr('src', '//www.youtube.com/embed/vxWBxx-JfDM/hqdefault.jpg?rel=0&showinfo=0&autoplay=1');
	});
});
</script>

<a id="rhine"><div class="content c4" style="background-image:url(../../../images/work/newmarket2.jpg)">
<p class="pimage">Rhine River Cruise</p>
</div></a>

I just want it so that it's '<a id="vxWBxx-JfDM">' instead and that passes to the iframe.

Thanks!

 

[xbenjiiman]

You could add a class and use that as a selector. Then just pass the ID of the clicked element.

The below method by @kaku is a better alternative though, as he says, if the user has their JavaScript disabled then there is no fallback.

Also FYI you can reference your images from the root.

$(document).ready(function() {
	$("#closevid").click(function(){
		$("#hiddenvid").hide(50);
		$("#hiddenvid iframe").delay(500).attr('src', '');
	});
	$('.youtube-link').click(function() {
		$("#hiddenvid").show(50);
		$('#hiddenvid iframe').delay(500).attr('src', '//www.youtube.com/embed/' + this.id + '/hqdefault.jpg?rel=0&showinfo=0&autoplay=1');
	});
});

<a class="youtube-link" id="vxWBxx-JfDM">
    <div class="content c4" style="background-image:url(/images/work/newmarket2.jpg)">
        <p class="pimage">Rhine River Cruise</p>
    </div>
</a>

<a class="youtube-link" id="RCDBHz8plDU">
    <div class="content c4" style="background-image:url(/images/work/newmarket3.jpg)">
        <p class="pimage">Rhine River Cruise 30s</p>
    </div>
</a>

<a class="youtube-link" id="izTDbYZxs7s">
    <div class="content c4" style="background-image:url(/images/work/newmarket.jpg)">
        <p class="pimage">MS Olympia</p>
    </div>
</a>

<a class="youtube-link" id="Ahp2z5bmsWU">
    <div class="content c4" style="background-image:url(/images/work/newmarket-kerry.jpg)">
        <p class="pimage">Killarney &amp; The Ring of Kerry</p>
    </div>
</a>

<a class="youtube-link" id="i7pQwNa9Dwo    ">
    <div class="content c4" style="background-image:url(/images/work/newmarket-kerry2.jpg)">
        <p class="pimage">Killarney &amp; The Ring of Kerry 30s</p>
    </div>
</a>

<a class="youtube-link" id="GISNCDcZ-30">
    <div class="content c4" style="background-image:url(/images/work/newmarket-seville.jpg)">
        <p class="pimage">Seville, Granada &amp; Classic Spain</p>
    </div>
</a>

<a class="youtube-link" id="phfo4ob9F8k">
    <div class="content c4" style="background-image:url(/images/work/newmarket-seville2.jpg)">
        <p class="pimage">Seville, Granada &amp; Classic Spain 30s</p>
    </div>
</a>

<a class="youtube-link" id="0fOQVSjem94">
    <div class="content c4" style="background-image:url(/images/work/newmarket-rugby.jpg)">
        <p class="pimage">International Rugby Festival</p>
    </div>
</a>

<a class="youtube-link" id="fHRi7-9VvMg">
    <div class="content c4" style="background-image:url(/images/work/newmarket-rugby2.jpg)">
        <p class="pimage">International Rugby Festival 30s</p>
    </div>
</a>

<a class="youtube-link" id="EDtNEhqxozE">
    <div class="content c4" style="background-image:url(/images/work/newmarket-netball.jpg)">
        <p class="pimage">International Junior Netball Festival</p>
    </div>
</a>

<a class="youtube-link" id="QSPWOacThV4">
    <div class="content c4" style="background-image:url(/images/work/newmarket-netball2.jpg)">
        <p class="pimage">International Junior Netball Festival 30s</p>
    </div>
</a>

 

[kaku]

I think your problem is in multiple parts:

#1 get the YT link for the video depending on which link has been clicked
#2 load the YT video using the iframe
#3 play the video

The way I would approach this problem would be to base everything off standard YouTube watch links (eg. https://www.youtube.com/watch?v=xxxxxxxxxxx) and then attach my own event handler to links found via partial attribute selector. This way, if the user has JS disabled or there is some other problem, the links will still work.

Example: document.querySelectorAll("a[href^=\"https://www.youtube.com/watch?v=\"]");

Depending on the exact requirement, you could use some other method to signify video links like a class or custom data attribute.

Your event handler should parse the link for the video ID and insert it in the appropriate place for the iframe src attribute. The advantage of this is that you can use the same event handler for all of your video links, so any adjustments only need to occur in one place. You can also use the autoplay feature in the embed API to fulfill the last requirement.

So the solution looks like this:

#1 Write a function that, given a YT "watch" link: parses the video ID from the event target's href attribute, forms a YT embed url, applies the url to the src attribute of a given iframe
#2 Select all of the video links on your page via a method of your choice
#3 Apply the event handler to each of those links

 

[Russinating]

Amazing, thank you xbenjiiman.

 

[xbenjiiman]

No worries. Just a heads up I accidentally left some spaces in one of the IDs (Killarney & The Ring of Kerry) and it breaks it.

 

[Russinating]

Ha, thanks .