i am using iframe but fullscreen button is not working.
i have check inspect element i am getting below
<iframe frameborder="0" scrolling="auto" src="https://videos.xyz" allowfullscreen></iframe>
<iframe id="kaltura_player" src= “https://videos.xyz” width="100%" height="100%" allowfullscreen webkitallowfullscreen mozallowfullscreen allow="autoplay *; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation" frameborder="0" title="Kaltura Player"></iframe>
any solution to enable fullscreen
To enable fullscreen on an <iframe>, use allow="fullscreen"
<iframe allow="fullscreen"></iframe>
The allowfullscreen attribute is now considered as a legacy attribute and it's now redefined as allow="fullscreen".
IFrame Documentation
Related
How to make height settings from the embed link for video background under the header, such as this website: https://www.videvo.net/, I own embed link video that is very responsive, and the change height in this link:<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
Welcome to Stack Overflow!
Remove padding-bottom and set the height and you should be good to go!
<div style="width:100%;height:100px;position:relative;">
<iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;">
</iframe>
</div>
Is there a way to lay a div tag on top of a YouTube iframe for full-screen?
I was able to lay a div tag on top of a YouTube iframe with the following code:
<html>
<head></head>
<body>
<div style="position:relative">
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=tQ0yjYUFKAE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div style="position:absolute;top:0px;left:0px;background:#000;width:500px;height:500px;"></div>
</div>
</body>
</html>
But when YouTube iframe above is full-screen, the added div tag disappears.
Please let me know if there is a way to solve this problem.
I'm trying to deactivate the minute bar on an iframe where a link to a vimeo video is inserted.
This is the CSS I put, but it doesnt work. If I change it in the browser console then it works.
<iframe src="https://player.vimeo.com/video/4766864944" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
CSS
.player .vp-controls .play-bar {
display: none;
}
You can not do it with CSS but you can pass right query parameter to src prop. In your case it will be controls=0
<iframe src="https://player.vimeo.com/video/4766864944?controls=0" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
For more information you can check this link
I have noticed that iframes are becoming mixed up with what iframe they actually belong to when the back button is pressed.
As an example I have made a jsfiddle. Press Run and then wait for the left iframe to refresh - then click any link inside the right iframe and then press chromes back button. You'll notice that the right iframe has lost its context and now has the same content as the left iframe.
http://jsfiddle.net/N4uEv/4/
I have been able to reproduce this in a few different ways (not just through using a setInterval timer).
This was not happening in the previous version of Chrome, and is not happening in firefox/ie/safari etc. Is this a bug or am I missing something?
<div id="iframe1">
<iframe src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>
<div id="iframe2">
<iframe src="http://mobafire.com" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="500" height="600"></iframe>
</div>
setInterval(function(){
$('#iframe1').html(' ').html('<iframe src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>');
}, 5000);
Chrome is affected by a known and still open bug that screws iframes contents when using back/forward buttons: https://code.google.com/p/chromium/issues/detail?id=395791
Basically Chrome doesn't know which content to show in which frame after a history back/forward.
To solve this you need to add a unique name attribute to your iframes.
Eg:
<div id="iframe1">
<iframe name="iframe1" src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>
<div id="iframe2">
<iframe name="iframe2" src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>
I've tried everything but my iframe just doesn't trim! Here's my code:
<div id="hljod">
<iframe src="http://www.ruv.is/hvad-er-malid/enginn-medaljon-jonsson" frameborder="0" scrolling="no" style="posistion:absoulute;clip:rect(171px,1100px,800px,250px); top:-171;"></iframe>