How can I use JavaScript to update the src value of an iframe based on input?
<input class="url" id="url1" type="url" value="youtube url">
<input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to playlist">
<iframe class="video" id="video1" ></iframe>
<script>
function changevideo() {
var newUrl = document.getElementById('url1').value;
document.getElementById('video1').setAttribute('src', newUrl);
}
</script>
Here is a simple way to utilize it:
function modifyVideo() {
var urlValue = document.querySelector('#url1').value;
console.log(urlValue)
document.getElementById('video1').setAttribute('src', urlValue)
}<input class="url" id="url1" type="url" value="youtube url">
<input onclick="modifyVideo()" class="add-video" id="add-video1" type="submit" value="add to playlist">
<iframe class="video" id="video1"></iframe>Make sure you can retrieve the src attribute while choosing the video:
let chosenVideo = document.getElementById('video1');
chosenVideo.src = path;I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...
Currently, I have a React Js accordion in which clicking on an item opens the panel. To close it, you need to click on another item. However, I am looking to enhance this functionality by allowing the active panel to be closed after clicking on the AccButt ...
I am currently in the process of developing a script that will allow me to retrieve data for my chart from an external PHP file. Initially, I attempted manually inputting the data into the chart and it worked perfectly fine. However, when I tried using A ...
I am currently working on a new app that includes both a header and main view, utilizing directives. At first, I had the directive in its own file but decided to relocate it into app.js in order to resolve an issue. Throughout this process, I have experim ...
I have an associative array that I am using to display images. I want to randomly select two or more pictures from these images with my code, but I have a couple of questions: How can I enhance the efficiency of my code? And is there a way to use JSON or ...
It appears that the HTML output in huxtable has a column width setting that automatically adjusts to fit the content, creating an aesthetically pleasing output. On the other hand, the RTF output makes all columns equal width, which is not as visually appea ...
I am currently working on a VueJS code to display a bar-chart: Vue.component('bar-chart', { extends: VueChartJs.Bar, data: function () { return { datacollection: { labels: ['MICROFINANZAS -SECTOR C ...
I'm attempting to trigger my upload() function when the file input changes, but I'm having trouble getting it to work. This is the HTML code: <input type="file" ng-model="image" ng-change="uploadImage()"> And here's the correspondin ...
After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...
Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...
Hey everyone, I have set the input date to dd/mm/yyyy format using moment(donors.donateDate).format('DD-MM-YYYY'). However, when I click the submit button, an error is displayed in the console stating: The specified value "23-03-2022" ...
I'm currently working on turning my Vue app into a PWA using the Vite-PWA-plugin (this plugin) However, I've encountered an issue where the page keeps reloading repeatedly when served from cache, especially when utilizing the Oauth2 protocol for ...
It appears that the CSS text-decoration style is not being correctly displayed in Opera 11 and IE 9, but works perfectly fine in Chrome, Firefox, and Safari. Can anyone offer a solution to fix this issue? Incorrect Rendering: Correct Rendering: Below is ...
Currently, I am facing an issue with a WordPress slider that lacks anchors for linking to specific sections. I am wondering if there is a way to direct a user to a URL and simulate the action of pressing the down arrow or clicking a button multiple times ...
By toggling a checkbox, I aim to show or hide the same div with a different heading. $('#cbxShowHide').click(function() { this.checked ? $('#block').show(1000) : $('#block').hide(1000); }); #block { display: none; bac ...
As a beginner in React, I am attempting to create an app following a tutorial. In my component, I utilized the figure tag but it's not showing up when inspecting element in Chrome. Here are the code snippets: The tutorial includes a div tag as a chil ...
In my application, I have a Bootstrap modal dialog that is used to display data when the user clicks on "Edit" in a jQuery data table. The modal contains Cancel and Submit buttons. Everything works correctly when I open the modal, click Cancel, select ano ...
I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...
Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...
I have a website that displays content based on user subscription status. If the subscription is active, a book is loaded; otherwise, if it's expired, a specific page is shown: https://i.sstatic.net/HLv0B.png To enhance user experience, I preload th ...