Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth.

My idea involves adding an extension to the video URL. By appending &t=1m22s to a video link, it will start playing from 1 minute and 22 seconds. Is it possible to achieve this using iframe and JavaScript?

Here is an example link: https://www.youtube.com/watch?v=KKp9g8fTBDQ

And here is an example with the time extension added (Phone Start Up): https://www.youtube.com/watch?v=KKp9g8fTBDQ&t=3m52s

I hope this clarifies what I am trying to achieve.

javascripthtmliframehyperlinkyoutube

Answer №1

const source = $("#video")[0].src;
$(document).ready(function() {
  $('#lap1').on('click', function(event) {
    $("#video")[0].src = source + "&start=60";
    event.preventDefault();
  });
  $('#lap2').on('click', function(event) {
    $("#video")[0].src = source + "&start=200";
    event.preventDefault();
  });
  $('#lap3').on('click', function(event) {
    $("#video")[0].src = source + "&start=300";
    event.preventDefault();
  });
});

body {
  padding: 30px;
}
.button {
  font: bold 20px Arial;
  background-color: #FF8000;
  color: #333333;
  padding: 2px 6px 2px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a id="lap1" class="button" href="#">Lap 1</a>
<a id="lap2" class="button" href="#">Lap 2</a>
<a id="lap3" class="button" href="#">Lap 3</a>
</br>
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/J4LI_EqnJq8?autoplay=1" frameborder="0" allowfullscreen></iframe>

View the Code

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the array element that is larger than the specified number, along with its adjacent index

Consider the following object: const myObject = { 1: 10, 2: 20, 3: 30, 4: 40, 5: 50, }; Suppose we also have a number, let's say 25. Now, I want to iterate over the myObject using Object.entries(myObject), and obtain a specific result. For ...

javascriptarraysecmascript-6

Arranging objects in an array based on a separate array of strings

Here is an array of objects that I need to rearrange: var items = [ { key: 'address', value: '1234 Boxwood Lane' }, { key: 'nameAndTitle', value: 'Jane Doe, Manager' }, { key: 'contactEmail', value: ...

javascriptarraysangularjs

Creating a dynamic JSON structure from an array list of elements: A step-by-step guide

I am faced with the task of transforming an array of employee IDs, listed as follows: empIds: [38670, 38671, 38672, 38673], into a JSON payload structured like this: { "members": [ { "EmployeeId": &quo ...

javascriptarraysjson

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

What is the best way to extract data from a series of nested JSON objects and insert it into a text field for editing?

I am facing a challenge with appending a group of nested JSON objects to a text field without hard coding multiple fields. Although I have used the .map functionality before, I am struggling to make it work in this specific scenario. const [questions, setQ ...

javascriptreactjsmaterial-ui

Transferring data from jQuery Ajax to PHP

I'm facing a challenge in retrieving a value back to PHP that I can manipulate and save to the database. It appears that using the GET method with jQuery AJAX is not yielding the desired results. Below is the PHP code snippet where I attempt to captur ...

phpjavascriptjqueryajax

Obtain an individual item from the reducer array

I am working on a company reducer that will store an array of companies. To optimize performance, I aim to fetch only the necessary company object from my API when a user navigates to /company/name. This way, if a user visits the same company page multiple ...

javascriptreactjsredux

Returning draggable elements to their original placement

I'm looking to create a custom function that resets my draggable elements to their original positions when invoked. This is not related to the built-in revert functionality. $('.drag').draggable({ stack: ".drag", snap: ".dro ...

javascriptjqueryhtml

The app.html for the skygear/react-chat-demo is malfunctioning

I followed the instructions provided in the Skygear manual at https://docs.skygear.io/guides/advanced/server/ The skygear-server-darwin-amd64 started successfully. Then, I attempted to run the react-chat-demo project from https://github.com/skygear-de ...

javascriptnode.jsskygear

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Take a look at the HTML code snippet I'm currently working on... <div id="projects"> <H1 class="projects">PROJECTS</H1> <div class="box"></div> <div class="box"></div> <div class="box"></ ...

htmlcss

I'm experiencing an issue where using .innerHTML works when viewing the file locally, but not when served from a web server. What could be causing this discrepancy?

Utilizing mootool's Request.JSON to fetch tweets from Twitter results in a strange issue for me. When I run the code locally as a file (file:// is in the URL), my formatted tweets appear on the webpage just fine. However, when I serve this from my loc ...

javascriptajaxmootools

It can be challenging to manage numerous if-else conditions in JQuery

I am having trouble with my JQuery code that checks multiple conditions. No matter what I enter, it always goes to the else condition. $(function() { $('#installment').on("keydown keyup", check); function check() { var inst = Number($( ...

javascriptjqueryhtmlif-statement

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Is there a way to combine a smaller image with a larger background image on one canvas while allowing the smaller image to move around? I'll need to save the original background pixel data so that each frame can be redrawn with the overlay in its upda ...

javascriptgraphicshtmlcanvaspixel

Incorporate JQuery into your NodeJS project by leveraging the existing minified file

Can we integrate JQuery into Node.js and make JQuery AJAX calls without altering the syntax by using a pre-downloaded minimized JQuery file? To clarify, I have the minified file and wish to incorporate it into Node.js in this manner: var jquery = require( ...

javascriptjquerynode.jsajax

Creating MySQL query results in Node.js manufacturing process

I am looking to format the MySQL result in Node.js in a specific way. The desired result format should look like this: [ { "m_idx" :1 , "contents" : { "m_name" : "a", ...

javascriptnode.js

How can I use jQuery UI to slide a div, while also smoothly moving the adjacent div to take its place?

Wishing you an amazing New Year! I am looking to create a smooth sliding effect for a div when a button is clicked. I want the adjacent div to slide alongside it seamlessly, without any clunky motions or delays. Currently, the adjacent div only moves afte ...

javascriptjqueryjquery-uisliderjquery-ui-slider

React Native not refreshing state data

I'm working with a FlatList that contains the code snippet below: <FlatList ........... refreshing={this.state.refresh} onRefresh={() => { this.setState({ ...

javascriptandroidreactjsreact-native

Retrieve the chosen option index using AngularJS

It is common knowledge that a select list can have multiple options, each starting from [0]. For example: [0]<option>E.U</option> [1]<option>India</option> [2]<option>Peru</option> In my Angular application, I am using ...

javascriptangularjs

The error stating that document.getElementById(...) is null has occurred within RSForms due to a TypeError

Issue: When clicking on the form to continue, a TypeError: document.getElementById(...) is null error occurs. Can anyone help me fix this problem? When I click on the continue button, it calls the function submitForm. <script type="text/javascript"> ...

javascript

Accessing Public Photos from Facebook Users

Is it possible to create a web app that can retrieve all public photos from any user's Facebook account using their profile URL? For instance, some Facebook profiles allow non-logged in users to view profile pictures and cover photos. I am developing ...

javascriptfacebookfacebook-graph-apireactjsfacebook-javascript-sdk