I am trying to create a code in HTML that embeds a YouTube video (but the URL that you entered). I would enter the url (ex: www.youtube.com/watch?v=XXXXXXXXXXX), and then it would embed that video.
This is what I have so far: (I am very new to HTML)
<!DOCTYPE html>
<html>
<form>
Video URL:<br>
<input id="url" type="url">
<iframe width="560" height="315" src="url" frameborder="0" allowfullscreen></iframe>
</form>
<iframe width="420" height="315"
src="url">
</iframe>
</html>
Try to continue from that fiddle:
https://jsfiddle.net/8kodfrsy/
What I've made was just to change the video src attribute.
document.getElementById('myframe').src = url;
If you reference this answer here you'll notice that the video's url needs to have /embed/<video id>
So, for example, if you have the following url:
https://www.youtube.com/watch?v=ChOTlnQZ4uU
You're going to change it to:
https://www.youtube.com/embed/ChOTlnQZ4uU
So, just transform the string to get the video id and modify the url string using simple js.
Check this on how to transform the string url.
The best answer is, I believe, the following code:
<form action="http://www.youtube.com/results" method="get" target="_blank" >
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>
Related
I've been trying to add a recaptcha to my website and I've added the widget but here's the problem - the user can click the submit button before finishing the recaptcha and that just defeats the whole purpose of having a recaptcha at all.
How can I make the button appear only when the reCaptcha is finished?
Screenshots are attached, thanks in advance
<h1 style="font-family: sans-serif">Shorten a URL!</h1>
<form action="/shortenurl" method="POST">
<input type="text" name="url" placeholder="URL..."/>
<iframe title="reCAPTCHA" src="boring recaptcha" role="presentation" name="a-3dswbffhbuei" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="304" height="78" frameborder="0"></iframe>
<input id="sm" type="submit" value="Shorten URL!" />
</form>
</div>
just add the required attribute in input tag
<input type="text" name="url" placeholder="URL..." required/>
I have an HTML page where, using a form, I pass a variable to a PHP page which generates a graph.
The graph is loaded with JpGraph, a powerful tool that creates img.
Given the following form, I load four different graphs passing four different values.
As you can see, the graphs are redirected to new tabs in the browser (target="_blank"):
<form method="POST" action="graph.php" target="_blank">
<select name="eti">
<option value="04" selected> graph with input value 4
<option value="06"> graph with input value 6
<option value="08"> graph with input value 8
<option value="11"> graph with input value 11
</select>
<input type="submit" name="tag" value="load graph" />
</form>
I wonder if it is possible to dynamically load the four graphs on the same HTML page, right below the form (instead of redirecting them to different tabs).
Do I need Javascript to do that? Any tips are welcome.
I found a way using iframe:
<form class="forms" method="POST" action="graph.php" target="iframe">
<select name="eti">
<option value="" selected> - scegli un tag -
<option value="04"> tag 4
<option value="06"> tag 6
<option value="08"> tag 8
<option value="10"> tag 10
</select>
<input type="submit" name="tag" value="load graph" />
</form>
<div class="embed-container">
<iframe name="iframe" width="400" height="350" frameborder="0" allowfullscreen>
<img src="graph.php" />
</iframe>
</div>
In addition to this, some CSS formatting was needed.
I have a form which has a target, and I'd like after submission for only the form to be replaced by the target page, not the whole page. I've wrapped the form in <frame> tags but after form submission the whole page is reloaded with the form submission target, not just the form itself (which is contained by frame tags).
Anyway to get the form submission to only replace that frame. Ideally the URL in the browser will not change.
You can use iframe like this. If you set the iframe as the target of the form the response gets redirected to the iframe.
You just have to use iframe's name as the form's target attribute.
<form id='myform' action='action.php' method='POST' target='formresponse'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' maxlength="50" /><br/>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' maxlength="50" /><br/>
<input type='button' name='Submit' value='Submit' />
</form>
<iframe name='formresponse' width='300' height='200'></iframe>
http://www.html-form-guide.com/web-form/submit-form-multiple-scripts.html
MDN Form target
Try This
<form action="your action" target="iframe name">
</form>
<iframe style="display:none" name="iframe name"></iframe>
This could work
<form action="Action 1 " target="iframe name"></form>
<iframe style="display:none" name="iframe name"></iframe>
Let me know what you get
I have built facebook app. It's hosted on:
http://resihop.herokuapp.com/.
The app is suppose to be visible here:
https://apps.facebook.com/393963983989013/
On facebook it's embedded in an iframe. The weird part is that for some users the content of the iframe is empty, just:
and for some users it displays the page. Here is the html: that I got from inspect element:
Working:
<div>
<noscript><div class="mas"><div class="pam uiBoxRed">Du måste ha javascript aktiverat i din webbläsare för att använda Facebook-applikationer.</div></div></noscript>
<form action="https://resihop.herokuapp.com/?fb_source=search&ref=ts" method="post" target="iframe_canvas_fb_https" id="canvas_iframe_post_4fe8ad942b9be6531902412" onsubmit="return Event.__inlineSubmit(this,event)">
<input type="hidden" autocomplete="off" name="signed_request" value="x4b_ddxAkL71eQEdopzIZJpWZCmTPFqOMmmMvx_TCC8.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImV4cGlyZXMiOjEzNDA2NTQ0MDAsImlzc3VlZF9hdCI6MTM0MDY0ODg1Miwib2F1dGhfdG9rZW4iOiJBQUFGbVR1TlI2UlVCQU9zQkRkc2hwbkpNN0pKR0ZaQTNsaGhtMlViNWFlWkFpeFpDNnNYcWVEbXpaQjVqb1dtVUwzVTg1WW5wUWg2WkJVdUxQV3o2M1lIQk5aQVQ4a3dNNGNtWkExZU00MXZ5SU5KeVpDeWFpbDhWIiwidXNlciI6eyJjb3VudHJ5Ijoic2UiLCJsb2NhbGUiOiJzdl9TRSIsImFnZSI6eyJtaW4iOjIxfX0sInVzZXJfaWQiOiIxMDAwMDA2MjcwMTQzODQifQ">
</form>
<iframe class="smart_sizing_iframe" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="800" style="height: 574px; "></iframe>
</div>
Broken:
<div>
<noscript><div class="mas"><div class="pam uiBoxRed">You need Javascript enabled in your browser to use Facebook Applications.</div></div></noscript>
<form action="https://resihop.herokuapp.com/" method="post" target="iframe_canvas_fb_https" id="canvas_iframe_post_4fe8adec0223e0f59580030" onsubmit="return Event.__inlineSubmit(this,event)">
<input type="hidden" autocomplete="off" name="signed_request" value="yx5eMWJ-0WFSOHg5bkfxesurLc5zZcfuYdyuJqffv0M.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImV4cGlyZXMiOjEzNDA2NTQ0MDAsImlzc3VlZF9hdCI6MTM0MDY0ODk0MCwib2F1dGhfdG9rZW4iOiJBQUFGbVR1TlI2UlVCQUJ6NVRxdWRuaW1tN01ZVzRkdXhSMHczTU1zcDZvbU9ZZ3ZZVm1zZG11dVJLN1lEb1h6Mm9TYUFIeUpaQ2NsSjg5cFBFWkJaQ2haQURyMGZCWWIxOUxaQ0o0QnVaQnR3WkRaRCIsInVzZXIiOnsiY291bnRyeSI6InNlIiwibG9jYWxlIjoiZW5fVVMiLCJhZ2UiOnsibWluIjoyMX19LCJ1c2VyX2lkIjoiNjUxNjY2NDgzIn0"></form>
<iframe class="smart_sizing_iframe" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="800" style="height: 294px; "></iframe>
</div>
One difference I have noticed is that the actions are different. I have waited for several hours now, so it might be a server-unsync-thing, but probably not.
Simple question, however I can't find an answer anywhere.
I need a text input that can display HTML in it's value i.e:
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value="<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>" />
Most of the other answers will work for this specific situation, but the correct way to do this is to HTML Encode the entire value:
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value="<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>" />
jsfiddle
This avoids the necessity of worrying whether there may be single or double quotes in the value string. Depending on what platform you're using, there's probably a convenience method to do this automatically. e.g. HttpUtility.HtmlEncode in .NET
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value='<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>' />
single quotes work too.
Replace those double quotes within the value property with ".
First, you need to encode all the characters that are required to be encoded.
Then, you can surround the string in single quotes.
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value='<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>' />