I'm trying to get the lazy loaded iframe Id and fail with a TypeError n is null. What am I missing?
$(document).ready(function() {
var widgetIframe = document.getElementById('sclazy');
console.log(widgetIframe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<iframe id="sclazy" height="500" width="500" frameborder="0" allow="autoplay" class="lazyload" allowfullscreen="" data-src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/188612777&auto_play=false&buying=false&sharing=false&download=true&single_active=true&hide_related=true&show_comments=true&show_user=false&show_reposts=false&show_teaser=false&visual=true&show_artwork=true">
</iframe>
Had the same pb, but i did it in two times like this:
var iframeElement = document.querySelector('iframe');
var iframeElementID = iframeElement.id;
Related
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I want to embed external link to my anchor tag with javascript.
When i press on achor tag, which is actually an image, i want to load < iframe > with that external link.
Firstly i need iframe to be hidden and only show when the anchor tag is clicked.
This is what i have so far:
html
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="img/icon.png">
js
function openUrl(){
var myUrl = "https://www.youtube.com/embed/zBFGkUmVkAs";
document.getElementsByName('myIframe')[0].src = myUrl;
}
});
But it doesn't work
Any help please?
Thanks!
#aiden87
Try this code below, I have made a demo please check this link. https://jsfiddle.net/saujankmarv/p7z38rhq/8/
html:
<a href="#" id="atag">
<img src="img/icon.png">
<iframe style="display:none;" id="myFrame"></iframe>
</a>
js
var openUrl = function() {
console.log('log');
var iframe = document.getElementById("myFrame");
iframe.src = "https://www.youtube.com/embed/zBFGkUmVkAs";
iframe.style.display = "block";
}
document.getElementById('atag').addEventListener('click', openUrl);
You can try this:
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
iframe.attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
}
<a href="#" onclick="openUrl();">
<img src="img/icon.png">
</a>
<iframe width="560" height="315" id="myFrame" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none">
</iframe>
Try this.
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
}
<img src="img/icon.png">
<iframe width="560" height="315" id="myFrame" src="https://www.youtube.com/embed/zBFGkUmVkAs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none"></iframe>
Inline click handlers are not the best solution , you can hide the iframe initially and then toggle its visibility.
$('a').on('click' , function(){
$(this).find('iframe').attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
$(this).find('iframe').slideToggle(0);
return false;
})
a > iframe {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png">
I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.
I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.
Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>
I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()