Is it possible to add "sub-text" to an iframe? For example I have the following code...
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
And I want to be able to add some text beneath that explains in detail the video etc, but whenever I've used a simple tag within or just outside of the iframe, it treats it as if the iframe isn't present and the text always appears at the top of the page instead of beneath the iframe. Maybe I need to embed this video in some other way other than an iframe in order to be able to use text along with it?
I'm not sure what isn't working for you, maybe your CSS is messing it up?
I was able to use the iframes of the videos and add a little description to them. Here is a sample, it's also on jsFiddle
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<p>Pharoahe Monch Simon Says (Avicii Remix)</p>
</div>
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
<p>deadmau5 feat. Rob Swire - Ghosts N Stuff</p>
</div>
Related
This is my first time posting here and don't really know much about web coding or CSS. I'm a CGI artist who is trying to implement a simple feature. I would like to showcase my Demoreel on my website, figured out how to add the video in, but the position is on the far left of the screen. I'm using Artstation web builder, they don't have an option to implement the video visually. I like to place it in the middle of the screen for the website before showcasing projects since its a built website there are lots of coding and hopping can implement the position code in the middle of without adding in an extra function and such.
I'm using the Firefox Inspector to change the coding when trying to add a position just add a text rather the action on the website.
Any answers regarding to this are very appreciated
Thanks!
<div>
<iframe src="https://www.youtube.com/embed/Ywzukda7WsI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">
</iframe>
</div>
What it looks like now on the website
In the iframe, add:
<iframe style='display: block; margin: 0 auto;'>
And that should work.
I tried it on JSFiddle:
https://codepen.io/Rohittt/pen/eQwLYe
you can just copy the code from here or the JSFiddle!
Hope I helped you!
I have a list of urls (lets call them url1.com,url2.com,url3.com). I want to load their contents into an ifram so i can copy them. However, if i create seperate iframes for each url i cannot copy them at one. Is it possible to load multiple urls into one ifram which i can then copy. The urls only contain a string of letters and nothing else.
https://pastebin.com/mQVRPXe4
<iframe src="https://url1.com" src = name="targetframe" allowTransparency="false" scrolling="no" frameborder="0" >
</iframe>
<iframe src="https://url2.com name="targetframe" scrolling="no" frameborder="0" >
</iframe>
<iframe src="https://url3.com name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
You can do a couple of things. Namely, use ajax requests or style the iframes. You can easily remove the border on the iframe with the frameBorder attribute.
I know this isn't really the best answer, and I'm not really sure what you are really trying to do here, but I was asked to put this as an answer
This question already has answers here:
Capture iframe load complete event
(6 answers)
Closed 6 years ago.
I have an iFrame object that are defined like this:
<iframe src="iFrame SRC" frameborder="0" width="160" height="200" scrolling="no" longdesc="longdesc URL">
</iframe>
Now this frame took a long time to load, is it possible to make a loading text that simple says Loading frame..., and when the frame appears make the text go away? I tried putting the text right above the frame definition like this:
Loading...
<iframe ...>
</iframe>
It does stay on top of the frame but never goes away. How do you put a loading text for an iframe?
You can wrap the iFrame in a DIV with a class for loading a back ground image.
<div class="iframe-loading">
<iframe src="iFrame SRC" frameborder="0" width="160" height="200" scrolling="no" longdesc="longdesc URL">
</iframe>
</div>
.iframe-loading {
background:url(../images/loading.gif);
}
A long time ago I used to do this:
<iframe src="iFrame" etc. ...>
Loading frame...
</iframe>
<iframe id="sample_test" src="http://localhost:3000/tests/384" seamless="seamless" width="100%" height="1150px" scrolling="no">
</iframe>
This frame renders also #current_user_bar, which this way is displayed twice: from layout, and from frame.
How can I make it invisible in frame(but visible else content of the frame)?
Try this: $("#sample_test").contents().find("#current_user_bar").hide();
I am using iframe you-tube video in my website.
Sample Code:
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
If I click the youtube video it will redirect to the external page. I used the below code.
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
I know my way is wrong. It is not working. Please confirm to do this in anyway?
This will not work. To solve your problem you have to use javascript. For reference you can check following thread
Detect Click into Iframe using JavaScript
Another Solution is
<div style="position:relative">
<div style="position:absolute;width:414px;height:270px" onclick='window.location.href="http://google.com"' ></div>
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
</div>
Here I superimposed another div overiframe (we will not set any background for it, so iframe content will be seen) which will have onclick function which will take user to desired url