How can we move the iframe behind the div.
Here an sample below, I want to show "custom_title" div in front of the iframe.
It's initially showing but when we click the fullscreen, the "custom_title" div eventually gone.
Someone knows how to achieve this? I have here the codepen
Note: fullscreen icon does not display in the snippet, i don't know why. But you check out the codepen.
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
<div>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="true" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>
Fullscreen move pulls the video out of the document for the purposes of rendering. This leaves the text you positioned on top of it behind.
To achieve this you would need to make the div fullscreen and not the video (and then you'd need to format the video appropriately to get it to full the div).
I doubt you can override Vimeo's button to achieve that, so you'd need to add your own.
Full Screen option is disabled below so that Users use the button to make the iframe full screen.
To make the iframe full screen and show the div you can use:
Note: Try saving and running the code locally on your device as Stack Overflow's compiler is facing issues runnning it.
//https://jsfiddle.net/jlam55555/o5njka95/6/
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function makeFullScreen() {
document.getElementsByTagName("iframe")[0].className = "fullScreen";
var elem = document.body;
requestFullScreen(elem);
}
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
button{
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
}
iframe.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div>
<!-- Full Sceen option is disabled-->
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" disablefullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>
<button onclick="makeFullScreen()">Make Full Screen</button>
Or you can disable the controls and use the Vimeo Player.js to add more functionalities and I ,also, think that the problem can be solved without hiding the full-screen option and using the button to make the iframe full screen, by the Vimeo Player.js, but that was complicated, so, you can try, but I am not sure.
I'm afraid specifically in this case there is no way to achieve this, because of how fullscreen api is working. If you want some-element to display in fullscreen mode you need this some-element to be inside of DOM element which is displaying in fullscreen.
In your case you need .title_container to be inside vimeo player's element, but you could not put it inside iframe unless there is no specific api to do this.
Read more about fullscreen on MDN https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide
Simple example of how it can be done by adding custom fullscreen button.
Try to run on your local environment, fullscreen seems to be not working on stackoverflow:
let $btn = document.querySelector('#toggle'),
$iframe = document.querySelector('iframe'),
$video = document.querySelector('#video');
$btn.addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
return;
}
$video.requestFullscreen();
})
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
$btn.innerHTML = 'Exit fullscreen'
} else {
$btn.innerHTML = 'Fullscreen'
}
});
#video {
position: relative;
display: inline-flex;
}
#video:fullscreen iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.title_container {
position: absolute;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
#video:fullscreen button {
position: absolute;
}
button {
position: absolute;
bottom: 4px;
right: 24px;
}
<div id='video'>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; picture-in-picture" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
<button id='toggle'>Fullscreen</button>
</div>
Related
I am using an iframe tag to play a 9:16 aspect ratio video from my google drive. The iframe is wrapped around a div and the div is styled so that there are no black bars. The video is maintaining its aspect ratio but the thumbnail is not. The thumbnail covers all the wrapper's height but not the width. I want the thumbnail to also maintain the aspect ratio of 9:16.
Also, I did not add a custom thumbnail.
.potrait_9by16
{
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 177.777%; /* 9:16 Aspect Ratio*/
}
.potrait_9by16 iframe
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div className="potrait_9by16">
<iframe
width="100%"
height="100%"
frameborder="0"
src={videoObject.src}
allow="fullscreen"
></iframe>
</div>
Here is an image of the wrapper
Try below at https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video:
<!DOCTYPE html>
<html>
<body>
<style>
div.outer { overflow: hidden }
div.outer > div.inner { position: relative; margin: 0 -109.7283%; padding: 88.8888888% 0; overflow: hidden }
div.outer > div.inner > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
</style>
<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview">
</iframe>
</div>
</div>
</body>
</html>
It may mess up the video playback, though. The video controls (progress-bar etc.) get cropped when playback starts.
Replace the code there with the one I have provided.
I just checked your code, and looks like what you need is:
.x { overflow: hidden }
.neg { position: relative; margin: 0 -109.7283; padding: 88.8888888% 0 }
.neg > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
and use only x class for outer div, only neg class for inner div. That should probably do it.
I thought about removing the negative margin on playback, and was experimenting with something along those lines, but didn't get around to completing it. It should work to some extent, but what I found was that the black bordered thumbnail may be displayed for a short time before the playback starts (at least the way I tried it). If that's Ok, you could try that method. What I thought of was to display an invisible div (transparent overlay) covering the iframe that can capture a click and switch the iframe src to autoplay=1 URL. See if you can get that to work. If I have some time, I may look further into that.
I was adding a div using JavaScript with the same style as the iframe, just after the iframe:
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
If this div is added last, it will already be topmost. Otherwise, use z-index.
Then handle the 'click' event on the div.
The above div overlay technique has it's limitations. The below technique may be better:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Player</title>
<div id="player"></div>
body { background: #efe; padding: 2em; color: #575 }
h1:first-child { margin-top: 0 }
.player, #player { overflow: hidden }
.player > div, #player > div { position: relative; padding: 88.88888% 0; overflow: hidden }
.player video, .player iframe,
#player video, #player iframe
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
.player:not(.playing) > div, #player:not(.playing) > div
{ margin: 0 -109.7283% }
((W, D) => {
let $ = a => document.getElementById(a)
class Player {}
Player.play = (id, url) => {
let p = $(id)
, f = D.createElement('iframe')
, d = D.createElement('div')
f.src = url
f.setAttribute('frameborder', 0)
f.height =
f.width = '100%'
f.addEventListener( 'mouseover', e => f.dataset.overMe = 1 )
f.addEventListener( 'mouseout', e => delete f.dataset.overMe )
W.addEventListener( 'blur', e => {
if (f.dataset.overMe === '1')
setTimeout(a => p.classList.add('playing'), 1000)
} )
p.innerHTML = ''
d.appendChild(f)
p.appendChild(d)
}
W.Player = Player
})(window, document);
Player.play('player', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
See if you can use this latest update with multiple iframes...
Your issue could be because you may be using an id (maybe the same id) with all player divs. When using multiple player divs, you need to use unique ids and use class="player" for the divs instead of id="player":
<div id="player-1" class="player"></div>
<div id="player-2" class="player"></div>
<div id="player-3" class="player"></div>
If it still doesn't work, show me a demo (on your site, maybe), and I'll take a look. Call the play method with the id like
Player.play('player-1', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Player.play('player-2', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Is it possible to loop and display nested iframes one by one in javaScript?
for instance:
<iframe id="iframe1" style="border: 0; position: absolute; display: none; width: 100%; height: 100%; left: 0; top: 0">
<p>iframe 1</p>
<iframe id="iframe2" style="border: 0; position: absolute; display: none; width: 100%; height: 100%; left: 0; top: 0">
<p>iframe 2</p>
<iframe id="iframe3" style="border: 0; position: absolute; display: none; width: 100%; height: 100%; left: 0; top: 0">
<p>iframe 3</p>
</iframe>
</iframe>
</iframe>
Well i can just say, explicitly if you dont need it to work this way (you can change the enviroment) change it!
for everyone else theres this little piece of code (well its bad but it works):
/* ty to -> https://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript */
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument;
}
/* loop through frames and iframes, starts default at top */
function frameLooper(cb, rec = 0, base = top.document) {
return base.querySelectorAll('iframe:not(.hiddenFrame), frame:not(.hiddenFrame)').forEach(function(el, index){
var doc = iframeRef(el);
/* empty body -> gtfo */
if (!doc.body || !doc.body.children.length){
return true;
}
/* execute callback with -> iframe.document */
typeof cb == 'function' && cb(doc);
/* recursive callback */
rec && frameLooper(cb, rec, doc);
});
}
just go with your callback function as executable, you're getting the iframe document as parameter. And if you want to use this for nested frames too, set the second param to something truthy.
so as an example you may just start with
top.frameLooper(function(e){console.log(e);}, 1);
Edit:
forgott to mention that if you want the frame to get exluded add the class "hiddenFrame" to the iframe / frame.
I want to make it so when I click on the facebook icon, a dialog opens in which you can see the feed of a certain page.
So basically I want to make a function (with jQuery) that toggles the visibility of an iframe (generated from Facebook).
This is working on my website: https://sjaeloglegeme.dk/, but on on mobile - when I tap on the Facebook icon the iframe doesn't "show itself".
I created a JSFiddle to show you my code but because of some reason it isn't even working on my pc. I don't know what I'm doing wrong...
https://jsfiddle.net/s4yf0tq1/
HTML:
<img src="https://vanineveld.github.io/sjaeloglegeme/img/fb.svg" alt="facebook logo">
<iframe id="fbDialog" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsjaeloglegeme%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
CSS:
#fb {
position: fixed;
bottom: 20px;
right: 20px;
}
#fb img {
height: 30px;
width: auto;
}
#fbDialog {
position: fixed;
bottom: 70px;
left: 30px;
display: none;
}
jQuery:
$('#fb').on('click', function() {
$('#fbDialog').toggle();
});
Did you look at this topic?
Or maybe try adding event.preventDefault() in your code like this:
$('#fb').on('click', function(e) {
e.preventDefault();
$('#fbDialog').toggle();
});
I have checked your https://sjaeloglegeme.dk/ website from my mobile. The iframe is completely working. or you could change the #fb position: absolute; to show it over the container.
I have just started coding and I have encountered a problem that seems very obvious to fix.
To animate my website, I decided to write a Javascript code using jQuery
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js.
The first part of the code work for me:
I click on "Hover Me" and the video pop-up.
All good.
Heres my code:
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera-2.svg">
</a>
<section class="popup-container">
<div class="popup-box-2">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera.svg">
</a>
<section class="popup-container">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
The CSS linked just fine
body {
padding: 0;
margin: 0;
width: 100%;
background-color: #ddd;
}
/*example-hoverVideo strip*/
.popup-container {
width: 100%;
height: 100%;
pointer-events: none;
}
.popup-box {
position: fixed;
width: 74%;
height: 100%;
border-radius: 14px;
background-color: red;
padding: 0px 0px;
z-index: 1000;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.popup-box-2 {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 0px 0px;
z-index: 330;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.hover-popup {
cursor: pointer;
font-size: 50px;
color: red;
font-family: helvetica;
width: 100%;
height: 100%;
}
video {
z-index: 1200;
margin: 0;
padding: 0;
box-sizing: border-box;
padding: 150px;
width: 100%;
height: 100%;
}
#media only screen and (max-width: 800px) {
video {
padding: 50px;
}
}
#media only screen and (max-width: 500px) {
video {
padding: 0px;
}
}
.example-text {
padding: 30px;
font-size: 50px;
}
.camera-vector {
pointer-events: none;
width: 35px;
margin: 5px;
}
/*example-hoverVideo strip*/
and here is what i wrote on main.js to see if it works :
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeIn(150);
});
});
So as you can see, what I'm trying to do now is to make the video fade-out when the mouse click again over it.
I kindly ask if somebody could teach me the event to make it work.
Thanks in advance
$('#logoimage').hide("fade",2000,function() {
$( "#logoimage" ).show( "fade",2000);
});
You can add a "show or visible" class to that element when it is clicked to show it and show it if it is clicked a second time to check if that element has "show or visible" this class if it should then Hide it!
example :
$(function() {
var self = $('.hover-popup');
self.click(function () {
var popUp = self.next().children('.popup-box');
if(popUp.hasClass( "visible" ))
{
popUp.fadeOut(150);
popUp.removeClass('visible');
}
else {
popUp.fadeOut(150);
popUp.addClass('visible');
}
});
});
If you just want to show/hide on click, then you can use
.fadeToggle()
https://api.jquery.com/fadetoggle/
$(function() {
var popup = $('.hover-popup');
popup.click(function() {
$(this).next().children('.popup-box').fadeToggle(150);
});
});
Edit:
To add a basic "click anywhere to close"
$(function() {
$(document).on("click", function() {
$(".popup-box:visible").fadeOut(150);
});
});
but this will only pickup clicks that haven't already been handled (eg clicking on the background, but not clicking on another button).
Ideally, you would also show a "modal background" which covers the whole page and clicking that would hide the popup-box. But that's a bit too broad for an SO question and you might be better off looking at a 3rd-party plugin (asking for one is also off-topic).
Thanks everybody..
..and thanks freedomn-m.
Fade Toggle work perfectly 👍
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeToggle(150);
});
});
I have two images...
function leftMove(el) {
if (el.className == "la") {
el.className = "la1";
getElementById(ra).className = "ra1";
} else {
el.className = "la";
getElementById(ra1).className = "ra";
}
}
.la {
position: absolute;
bottom: 370px;
opacity: .5;
}
.ra {
position: absolute;
bottom: 370px;
left: 1637px;
opacity: .5;
}
.la1 {
position: absolute;
bottom: 370px;
left: 500px;
opacity: 1;
}
.ra1 {
position: absolute;
bottom: 370px;
left: 1137px;
opacity: 1;
}
<img src="img.png" width="290" height="228" id="la" class="la" onclick="leftMove(this)">
<img src="img.png" width="290" height="228" id="ra" class="ra" onclick="rightMove(this)">
...that I am trying to modify. Specifically, I am trying to change the class of both images when either image is clicked. An example of the javascript I am using is:
The end goal would be to have both images reference new CSS, shown here:
If I do it correctly, both images should move and change opacity. For some reason, only the image with the "la"/"la1" class moves and changes opacity, while the "ra"/"ra1" image does nothing. I'm pretty sure this is because my javascript is broken, but I don't know why. Any advice would be greatly appreciated.
This is the first code I've written, so please be gentle if I'm being obtuse.
Thanks for taking the time. :)
You need to pass a string to getElementById and call the function on document:
document.getElementById("ra").className = "ra1";
...
document.getElementById("ra1").className = "ra";