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
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 tried the following code:
<iframe controls="0" autoplay="0" class="embed-responsive-item" src="videos/first_video.mp4"></iframe>
I have tried many things but not getting any solution. I want to disable the autoplay on the video and don't want to use <video> tag so its possible without <video> tag?
I think this is what you want.
function a() {
var iframe = document.getElementById("iframe");
iframe.src = "video.mp4"
}
<iframe src="imagename" height="200" width="300" id="iframe"></iframe>
<button onclick="a()">Play</button>
iframe does not support this by default. Why do you not want to use video tag? The only thing I can think of to make it look like an iframe without autoplay is with help of javascript.
First set the iframe src to empty or leave the src out.
Set a picture as iframe background to make it look like the video.
<iframe style="background-image:url(picture.png)" id="frame" controls="0" class="embed-responsive-item" src=""></iframe>
Then create an onclick event for that iframe and change the iframe src
function loadVideo() {
var frame = document.getElementById("frame");
frame.src = "video.mp4";
}
I would consider using video tag or a plugin that works on every browser.
According to this article the syntax should go like this:
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow="fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow=""></iframe>
This is fairly new (at least to me) and I don't see explicit directions as to how autoplay is shut off. Try either the second or third example. This is part of the new feature policy called iframe delegation which will go into full effect on april 2018. I will add onto this answer if I find more concrete info.
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
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>
I have a HTML page with 30 links each pointing to a YouTube video. All videos belong to the same YouTube Channel.
The HTML page also features a YouTube player.
I am trying to figure out if the following is possible (possibly without using PHP): Once a link is clicked, the video player refreshes on the same page and showes the video. The page itself does not refresh - only the video player does.
Are there any options other than PHP?
Can anyone link me to some sort of super easy guide for doing it myself? (..."below beginner" level).
How you are linking with youtube? with iframe tag ? If you are using iframe then you can see all the videos in same page only. Page won't refresh.
If it is not the case please be more specific.
You can do this using jquery. In the href attribute of links, use video's embedded url, as in below code.
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('a').click(function() {
$('iframe').attr('src', $(this).attr('href'));
return false;
});
})
</script>
<iframe width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>
<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw'>Link3</a>
Edit:
This will also works.
<iframe id='iframe' width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>
<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI' target='iframe'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU' target='iframe'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw' target='iframe'>Link3</a>
If you don't want the page to refresh, then your only option is JavaScript (i.e. you have to do it clientside).
You can do it by keep the youtube player in an iframe which has some ID (e.g: id="playerFrame"). Then in the relevant hyper link ('a' tag), put the id of the iframe as the value of "target" attribute.
<iframe id="playerFrame"></iframe>
Click to see video 1
See http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm