When loading the page automatically iframe also loading, it must not have to do like that
When i click button, then only iframe need to load but in iframe there is url
Can you give me example in jsfiddle, please
<input type="button">Load</input>
<div class="copy">
<iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
You can hide your iframe onload and then display when clicked.
<button id="btnLoad" type="button">Load</button>
<div class="copy">
<iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
<script>
const btnLoad= document.getElementById('btnLoad');
btnLoad.addEventListener("click", function(){
document.getElementById("font").style.display = "block";
});
</script>
Use an <a>nchor and an <iframe>. No JavaScript required.
Set a [name] attribute for <iframe>
ex. <iframe name="iframe0" src="about:blank" ...></iframe>
Set the <a>nchor [href] attribute to the url of intended destination.
ex. <a href="https://www.example.com" ...>...</a>
Set the <a>nchor [target] attribute to the <iframe> [name] attribute.
ex. <a href="https://www.example.com" target="iframe0"...>...</a>
Demo
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Consolas;
}
.btn {
text-align: center;
}
a {
text-decoration: none;
}
<button class='btn'>
VIDEO
</button>
<figure class='box'>
<iframe name='frame0' src="about:blank" frameborder="0" width="480" height="270"></iframe>
</figure>
Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.
Just Check the fiddle
Related
I'm trying to get this ad to work, and I have it set up so that it will turn into a gif onMouseOver, and thats working fine, but I want it to go back to the static image onMouseOut. Here is my code
HMTL
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="">
</a>
</div>
CSS
.RightAdvert {
float: left;
width: 8%;
}
The Advertisment class doesn't have any styles
Script
<script>
function playAnimation() {
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
</script>
Add a method on onmouseout event, onmouseout="showStatic()
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="showStatic()">
</a>
</div>
Then change the gif with static image in function showStatic() function:
<script>
function playAnimation()
{
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
function showStatic()
{
document.getElementById('animation').src = "squeezy-cheesy.png";
}
</script>
So I have an <object> and <embed> (which is the fallback) loaded into a html file (index.html)
like so:
<object id="glitch"
data="skull/Glitch"
width="100%" height="100%"
style="overflow:hidden; width: 100%; height: 100%; overflow-y: hidden;">
<embed id="glitch-embed"
src="skull/Glitch"
width="100%" height="100%">
</embed>
Error: Embedded data could not be displayed.
</object>
Inside the object is an <audio> tag that plays when the glitch happens I want to know if I can mute and unmute the audio tag inside the object and embed via a button in the index.html file how would one go about doing this?
Here is my button in the index.html it also controls other sounds in the index
Html:
<a href="#" class="mute-button MuteOff link">
<i id="mute-icon" class="fa fa-volume-up"></i>
</a>
js
$('.mute-button').on('click tap touch', function() {
var $this = $(this);
if( $this.hasClass("MuteOn") ) {
audio1.volume=1.0;
audio2.volume=1.0;
audio3.volume=1.0;
audio4.volume=1.0;
audio5.volume=1.0;
$this.removeClass("MuteOn").addClass("MuteOff");
$('#mute-icon').removeClass("fa fa-volume-off").addClass("fa fa-volume-up");
} else {
audio1.volume=0.0;
audio2.volume=0.0;
audio3.volume=0.0;
audio4.volume=0.0;
audio5.volume=0.0;
$this.removeClass("MuteOff").addClass("MuteOn");
$('#mute-icon').removeClass("fa fa-volume-up").addClass("fa fa-volume-off");
}
});
Thanks in advance
site I'm working on with this problem: https://ui-unicorn.co.uk
What I have now satisfies me in terms of an overall effect: Click on "show me", it displays an YT Video, when clicked once again - vid will hide etc. BUT even when site is loaded in the first place (and YT video is hidden) - all of its (Mb) size is counted as it was displayed causing the website to load slowly. My question is how to load the embeded video (with its size) only after I clicked on "Show me" element.
This is what I have:
HTML:
<div class="#">
<span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
<span class="#" id="shown">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
</span>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(){
$("#shown").toggle();
});
});
CSS:
#shown {
display: none;
}
Try something like this:
HTML:
<div class="#">
<i class="icon fa-angle-down"></i>Show Me
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened");
$(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened");
$(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/
I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>
I have the following code
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
<select id="MySelectMenu">
<option value="http://www.example.com">Example Site 1</option>
<option value="http://www.example2.com">Example Site 2</option>
</select>
<button onClick="newSrc();">Load Site</button>
This works well, it loads the source of the iframe depending on what option is selected from the menu. Now, what I'd like to do, after the option is chosen from the drop down and the Load Site button is clicked, is load the source from the option into the iframe, and then redirect the iframe ONCE after say...1 second.
So if Example Site 2 is chosen, the user clicks Load Site, http://www.example2.com is loaded, and the iframe is then redirected to http://www.example2.com/admin.
Thanks
Just trying to help! Here's a solution (working example you can play with the code http://jsbin.com/cakuh/1/), it's just a sketch but you should understand what to do:
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
<select id="MySelectMenu">
<option value="http://www.games.com">Games</option>
<option value="http://www.bbc.com">BBC</option>
</select>
<button>Load Site</button>
$(function(){
$('button').on('click', function(){
var src = $("#MySelectMenu option:selected").attr('value'),
myTimeout = null;
// first we de-attach and re-attach an event load
$('iframe[name="content"]').off('load').on('load', function(){
myTimeout = setTimeout(function(){
clearTimeout(myTimeout);
$('iframe[name="content"]').off('load');
// you see, we concat '/admin' to the src
$('iframe[name="content"]').attr('src', src + '/admin');
}, 1000);
});
// this will change the iframe src and load the page, triggering the iframe load event
$('iframe[name="content"]').attr('src', src);
});
});