with iframe i embedded a page to my site like this.
<iframe src="https://www.w3schools.com" width="80%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
now w3schools.com uses w3-row w3-white w3-padding w3-hide-medium w3-hide-small class in header and i want to hide it in my page?
How to perform this.?
If your iframe loads an address from same domain, Set an id for your frame and do this:
var frame = window.frames['myFrame'];
$(frame).contents().find('p').hide();
Related
I am developing a website where-in, i want a youtube video to be played when i click on the image. I don't want to go to the new tab for playing the video.
And I want the video to be placed exactly in the background of the image. When i click the image, the video should be played hiding the image.
Can anyone suggest me how to achieve this using html, css
You can simply add a property, which you can set as a boolean or any. Then you can create a method() to change the value of that property by clicking.
export class AppComponent {
isVideo : any = {};
OnChange(){
this.isVideo = !this.isVideo
}
}
Then in the template you can make 2 divs. One div contains your image. Other will contain video. Then you can use *ngIf="isVideo" to switch the div on click.
<div class="video" *ngIf="isVideo">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt=""
(click)="OnChange()"
/>
</div>
<div class="video" *ngIf="!isVideo">
<iframe
src="https://www.youtube.com/embed/OP7IdmB9Dlg?autoplay=1&loop=1&autopause=0&muted=1"
allow="autoplay"
width="640"
height="360"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
>
</iframe>
</div>
Here is the working Demo.
Note : You can also disable the autoplay function of the video if you want.
I was wondering that why the office form cannot be embedded into iframe perfectly.
Like the following code
<iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=Ix5rlILy0USDoDcUdHBCThkWvcx4TptKrO0BZZzx9edUMzFRTDdOMTk1NThIMEs1WFFSNzBWNFdFUi4u" style="height: 300px;">
<p>Have you completed the survey?.</p>
</iframe>
https://jsfiddle.net/n7e3wv6v/
It only displays the pop-up link, the users have to click the link and then fill the question on the pop-up page which is not convenient.
Is there a way to embed the whole form?
Make the height and width of iframe >= 350.
<iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=Ix5rlILy0USDoDcUdHBCThkWvcx4TptKrO0BZZzx9edUMzFRTDdOMTk1NThIMEs1WFFSNzBWNFdFUi4u" height="350" width="350">
</iframe>
This works! below 350 dimension it doesn't.
https://jsfiddle.net/qnsj1k3o/2/
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 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
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