I need to mute an iframe, but I don't know how to do it. Here is an example of what I have:
http://www.codecademy.com/en/bitAce74593/codebits/nW7U9b
Here you can hear the music from the website on the iframe, I need to automatically mute that audio.
Hope that someone knows how to do it.
Thanks
you can mute it by js, example:
just put this in your page:
<script type="text/javascript">
myVid=document.getElementById("video1");
myVid.muted=true;
</script>
you should replace "video1" by the id of your iframe, if the iframe don't have any id add an id to it as follow:
<iframe width="820" height="390" src="http://nyan.cat" id="iframeId"></iframe>
Related
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 will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
Does anybody know of a non Javascript youtube video pop up. I have a button on my homepage which I want to open a pop up with a youtube video inside.
Thanks guys
this is my link
<span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span>
this is my iframe
<iframe width="420" height="345" src="<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>" frameborder="0" allowfullscreen></iframe>'
I just need to find a way to make it pop up in the center of the screen like a fancybox, without javascript. Thanks guys
no i dont think there is a method without using JS but it is very simple with JS for a piece like this. you should just be able to place the popup in a div and then use CSS to make it hidden then on the button click a JS function that will bring it to the top.
Hope this helps :)
<div id='PopUp' style='display:none;'>
<iframe></iframe>
</div>
<button onclick='showPopUp()'>click Me</button>
<script>
function showPopUp()
{
document.getElementById('PopUp').style.display = 'block';
}
</script>
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 have an iframe that supposed to show me the pages according to the links.
the iframe code is :
<iframe width=940px onload=reSize() src="src/HEB/registerHEB.html" id="ifrm" name="iframe_main" frameborder="0" scrolling="no"></iframe>
i want to do that when i click on link such as this one
<a href="html/guides.html" target="iframe_main">
it will open the page in the iframe, but when i click F5 (refresh) it won't load the original src of the iframe, but the last link ive clicked.
Thank you very much.
use this script after iframe same as:
<iframe src="src/HEB/registerHEB.html" id="ifrm" ......></iframe>
<script>
document.getElementById("ifrm").src = 'src/HEB/registerHEB.html';
</script>