I have a javascript file that displays a variable number of videos embedded from youtube and displayed in a grid.
I need the users to be able to select one video and click submit where I will will store the src link of that video in a variable.
Below is the related javascript portion:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += `
<div class="col s3">
<iframe width="100%" id="videoFrame" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" >
</iframe></div>
`;
}
HTML:
<form id="form1">
<div class="input-field">
<input type="submit" id="but1" value="Save Selection">
</div>
</form>
How do I do that using an event handler or any other possible solution?
why not use const videoId as the id of each iframe? Because you can't use an id more then once. Then in an onclick handler of each iframe element you can fire a function that sets the value of <input type="submit" id="but1" value="Save Selection"> to this.id.
Like so:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += '<div class="col s3">
<iframe width="100%" id="${videoId}" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" onclick='submitVid(this.id);'>
</iframe></div>';
}
Then the submitVid(video) function will look something like this:
function submitVid(video) {
//the video variable will hold this.id or the videoId
//Here you can do whatever you want with video.
//Full video id:
var url = "https://www.youtube.com/embed/" + video + "?rel=0";
//pass value to a textfield to submit
document.getElementById("textfield").value = video;
}
A better is to just store the videoId and not the full url. It saves space and it is faster.
Hope this helps! If not, please comment
try some_var = document.getElementById("videoFrame").src
Related
I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.
Indeed I need a type of code like bellow:
<html>
<body>
<script type="text/javascript">
var userInput_stringVariable= "this part is user desired input string" ;
var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
</script>
<iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
This code doesn't work, while I need a code like this to work with!
A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.
HTML
<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>
Script
<script>
function mySubmit() {
let getInput = answer.value;
var address;
address = "https://en.wikipedia.org/wiki/" + getInput;
document.getElementById('search').src = address;
}
</script>
Here is a function that will probably do what you want:
<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");
if (userImput_stringVariable != null) {
document.getElementById("getPage").innerHTML =
"<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>
Just add
<body onload="selectPage()">
somewhere in the body so the function runs when the page does.
It'll open a prompt, the user then has to enter the address.
Also you'll need this in the body too:
<p id="getPage"></p>
It creates a paragraph with the contents of the iframe within the fuction.
I have tried to make a youtube interface to play music, but I want to change the music so I've made this script. The problem is, when I change the link the video won't work anymore and it gives me an error.
<iframe id="iframe" width="500" height="315" src="https://www.youtube.com/embed/SHFTHDncw0g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<input type="text" name="link" id="link" size="40">
<input type="button" value="Play" onclick="changeLink();">
<script>
function changeLink() {
var changeLink = document.getElementById("link").value;
document.getElementById("iframe").src += changeLink;
}
</script>
You are adding a new link instead of replacing, because you used += instead of = in your Javascript. As a result, you have 2 links concatenated.
Try replacing:
document.getElementById("iframe").src += changeLink;
With this:
document.getElementById("iframe").src = changeLink;
So here's my situation.
I have a page HTML that displays a YouTube video, using a standard iFrame link. What I am trying to do is have a text box on my page where people would enter a video's ID and the video would reload with the new link or video ID entered.
Code HTML:
<p> Type your video's ID here: <input type="text" name="VideoID"></p>
<iframe title="YouTube video player" src="http://www.youtube.com/embed/hqiNL4Hn04A" width="480" height="390" frameborder="0"></iframe></p>
You need to request the video ID within a form like
<p>
<form id="getytid">
<label>Type your video's ID here:</label>
<input type="text" name="VideoID" />
<input type="submit" value="go" />
</form>
</p>
<p>
<iframe id="theFrame" title="YouTube video player" src="" width="480" height="390" frameborder="0"></iframe>
</p>
Notice we assigned an ID to the form and the iframe so we can manipulate them through jQuery.
Then you could use this code to update the iframe with a new video ID :
jQuery(document).ready(function($) {
$("#getytid").on("submit", function (e) {
e.preventDefault();
$("#theFrame").attr("src", "http://www.youtube.com/embed/" + $("input[name=VideoID]").val()+"?autoplay=1")
}); // on
}); // ready
See JSFIDDLE
NOTE:
The initial iframe html doesn't have any src attribute set. You can leave it empty until the visitor inputs an ID or you can fill it with a default video path
you should look at this post as I think this is what you want.
dynamically set iframe src
http://jsfiddle.net/MALuP/
<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}
function newSite() {
var sites = ['http://getprismatic.com',
'http://gizmodo.com/',
'http://lifehacker.com/']
document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}
</script>
<input type="button" value="Change site" onClick="newSite()" />
Save the youtube url as a variable.
Html:
<input type="text" name="VideoID" id="youtubevid" />
JS:
var youtube = "http://www.youtube.com/embed/"; // base
var video;
var url;
// set value
$('#youtubevid').on('change', function() {
video = $('#youtubevid').val();
url = youtube + video;
// set link attribute here in iframe.
//$('#idofiframehere').attr('src', url);
});
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});
I have the following code where I am trying to embed a youtube player into a html page.
I do not see any errors on the console, but the player is not added on the html page.
<form name="urlReaderForm" onSubmit=" return validateForm()" method="post">
Url: <input type="text" name="url"><br>
edit: Times: < input type="Number" name="times"<br>
<input type="submit" type="submit" value="Submit">
</form>
<div id="youPlayer"></div>
<script>
function validateForm() {
var url=document.forms["urlReaderForm"]["url"].value;
var loopCounter=document.forms["urlReaderForm"]["times"].value;
var len = url.length;
var vIDpos=url.indexOf("v=");
var vID=url.substring(vIDpos+2,len-1);
alert(''+vID);
var html_var='';
html_var ="<object style='height: 390px; width: 640px'> <param name='movie' value='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>";
document.getElementById("youPlayer").innerHTML = html_var;
}
</script>
there's a couple of issues in the sample above...
there is no field for
var loopCounter=document.forms["urlReaderForm"]["times"].value; to read on the form
when you extract the URL from the form you strip off the last character. Use var vID=url.substring(vIDpos+2,len);
unless you add return false;
to the end of the script it will reload the page because of the so you'll never see your errors
I would recommend using the more modern iframe embeddeding, but if you still need to stick with your solution then try the following:
function validateForm()
{
var url=document.forms["urlReaderForm"]["url"].value;
//var loopCounter=document.forms["urlReaderForm"]["times"].value;
loopCounter = 0;
var len = url.length;
var vIDpos=url.indexOf("v=");
var vID=url.substring(vIDpos+2,len);
alert(''+vID);
var html_var='';
html_var ="<object style='height: 390px; width: 640px'><param name='movie' value='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>";
console.log(html_var);
document.getElementById("youPlayer").innerHTML = html_var;
return false;
}
I have to agree with previous poster about the build-in embeded code. To give you two new ideas I did this myself on two occassion using one and the other on the 2nd site.
<iframe width="640" height="360" src="http://www.youtube.com/embed/9m-L5InQZvM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
Is for the embeded one, the 2nd option I used was that I just made a list with videos and a general iframe just to have a target like so
<body class="center">
<h2 class="media">Videos</h2>
<ul id="list" class="videolist">
<li class="videolist"></li>
<li class="videolist"></li>
</ul>
<iframe id="video-frame" src="" width ="600" height ="350" name="video-frame">
</iframe>
</body>
And then put the embeded code into separate .html files like so
<!DOCTYPE html>
<iframe width="576" height="324" src="http://www.youtube.com/embed/FjCehYrEbO0?feature=player_detailpage">
Your browser does not support frames, please update your browser
</iframe>
But the main point is still, use a iframe and it's still considered HTML5 valid even though frames can be frowned upon, but that is general use. You can still use frames but they should be used to serve a greater purpose and not just because it's "easier" to divide/update content on a page.