Click Function for Modifying the Content of a Popup Window

I'm a beginner in JavaScript and I need help figuring out how to achieve the following task.

Essentially, my goal is to have lines of code like this:

<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>

The number within the parentheses, 0000000, should be replaced with a unique code at the end of each YouTube video link. For example:

<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>
<a onclick="JavascriptFunction(0000001)"><img src="image2.png"></a>
<a onclick="JavascriptFunction(0000002)"><img src="image3.png"></a>

The purpose of the JavaScript function is to open a popup window that has the same dimensions as a YouTube video and display the corresponding video based on the clicked thumbnail.

<iframe width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>

What I really want is a page showcasing all our company's video reviews where clicking on a product's thumbnail opens a popup window with the relevant video. While I know I can create separate pages for each video and use onclick="popWin()", we have numerous videos to include on this page. Is there a way to have one page and dynamically update the code in the iframe to show the correct video?

As this project is for a company, please note that I only have access to the HTML page and cannot make changes elsewhere. Adding a function in the head section is acceptable.

javascripthtmlcsspopup

Answer №1

Check out this JSFiddle demonstration

HTML Code Snippet

<a href="javascript:setVideo('yzpUKET1Ki0')">Video 1</a><br/>
<a href="javascript:setVideo('h8zIfkMp08U')">Video 2</a><br/>
<a href="javascript:setVideo('yG29lnYRuVk')">Video 3</a><br/>
<iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>

JavaScript Section

function setVideo(video) {
    document.getElementById("youtube").src = "https://www.youtube.com/embed/" + video;
}

Simply assign an id to your iframe, and update the src attribute accordingly.

Answer №2

make sure to include these references in your code, which will enable the popup functionality from a bootstrap modal

  1. jquery reference
  2. bootstrap js reference
  3. bootstrap css reference

see more details here: http://getbootstrap.com/javascript/#modals 

$(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
    $("#iframeYoutube").attr("src","#");
  })
  
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
<script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a onclick="changeVideo('e80BbX05D7Y')">video-1</a>
<a onclick="changeVideo('ReRcHdeUG9Y')">video-2</a>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      
        <iframe id="iframeYoutube" width="560" height="315"  src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe> 
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

for more examples and live demonstration, visit this CodePen link: http://codepen.io/rajashekar2012/pen/dMrodq

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

Is there a way to eliminate the gap between two horizontal rule tags?

What causes the space between two <hr> tags to remain? Despite setting the width of the <hr> tags to 49%, there is still a gap between them. How can this space be removed from the <hr> tags? Shown below is the HTML and CSS code: *{mar ...

htmlcss

Using Xpath to target elements based on attributes and retrieving the values of another attribute

I am trying to extract the datetime attribute value from each li element that contains an attribute type with the value of standard. However, my current code is resulting in an error. Here is the snippet: <li datetime="2019-06-03T14:45" offset="-135" t ...

phphtmlarraysdomxpath

What is the best way to handle a JSON arraylist in a Node.js environment?

Looking to extract and manipulate a specific data format in Node.js? Here is the data structure: {"orderSummary":[ { "name":"Wine", "ProductPrice":"500", "ProductQuantity":"2", "ProductCost":"1000", "SellerId":"2" },{ ...

javascriptjsonnode.js

When the webpage first loads, the CSS appears to be broken, but it is quickly fixed when

Whenever I build my site for the first time, the CSS breaks initially, but strangely fixes itself when I press command + s on the code. It seems like hot reloading does the trick here. During development, I can temporarily workaround this issue by making ...

javascriptreactjsnext.js

How to Make a Zigzag Formation in three.js?

I have been working on developing a 3D tool and was in need of a zigzag structure. I managed to create it by iterating a function that produces 'V' multiple times, but now I am looking for a way to achieve the same effect using a single geometry ...

javascriptthree.js

Ensuring secure communication with PHP web service functions using Ajax jQuery, implementing authentication measures

jQuery.ajax({ type: "POST", url: 'your_custom_address.php', dataType: 'json', data: {functionname: 'subtract', arguments: [3, 2]}, success: function (obj, textstatus) { if( !('error' in obj) ) { ...

javascriptphpjqueryajaxweb-services

What is the best way to make a div that maintains its size even when the content inside is modified?

My goal is to develop a media feed that includes various types of content such as text, images, and videos. To ensure user safety, I want to conceal any explicit posts with a warning that requires the user to click in order to view the content. Although I ...

htmlcss

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

htmlcss

Nesting maps in JavaScript is a powerful way to transform

I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...

javascripthtmlreactjsarray.prototype.map

The server encountered an unexpected error while processing the request, possibly due to a

My JavaScript file includes an interval function that calls the following code: setInterval(function() { $.getJSON('/home/trackUnreadMsgs', function(result) { $.each(result, function(i, field) { var temp = "#messby" + result[i].from; ...

javascriptphpajaxhttp-status-code-500

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Utilizing the st.components.v1.iframe, I integrated an authentication system that sends a token back to the parent when a user is authenticated. The iframe content is as follows: <script src="remote/auth.js"></script> <scri ...

javascriptpythonstreamlit

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

Incorporate a 'back' button in the tab content of vue-form-wizard

Currently, I'm working on implementing a vue form wizard from the repository: https://github.com/BinarCode/vue-form-wizard My challenge is to include a button in the second tab-content itself instead of having it placed in the footer. I attempted th ...

javascriptvue.js

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

javascriptc#asp.net.netdom-events

Updating ng-table within an Angular controller

Having encountered an unusual issue with ng-table. Here is a snippet of code from my controller: this.category = "Open"; this.category = ["Open", "Accepted", "Rejected"]; this.dataItems = []; var _this = this; this.$scope.$watch("vm.category", function( ...

javascriptangularjsngtable

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

javascriptjqueryhtmlcss

The active tab will dynamically update, however, clicking anywhere on the page will always bring you back to the first tab as

My view includes the following tabs: <div class="tabbable"> <ul class="nav nav-tabs padding-18"> <li class="active"> <a aria-expanded="false" data-toggle="tab" href="#Tab1"> <i class="green ac ...

javascriptjqueryasp.net-mvc

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

cssionic2

CSS Alignment in React with Material UI

Is there a way to align one button to the left while centering the other two? To see an example in Codesandbox, please visit HERE <DialogActions sx={{ justifyContent: "center" }}> <Button>Left</Button> <Button on ...

cssreactjsmaterial-ui

Ensure that react-native-google-places-autocomplete is assigned a specific value rather than relying on the default value

I am currently using a functional <TextInput>: <TextInput placeholder="Location" value={props.locationInput.toString()} onChangeText={location => props.updateLocationInput(location)} /> Initially, the props.locationIn ...

javascriptreactjsreact-nativereduxgoogle-places-api