I've this iframe that not allow me to click on back of iframe,
how can resize or allow to click on back when tha part of iframe is closed.
My code is:
<div class="iframe-container">
<iframe loading="lazy" src="https://test-website.it/" allow="camera *;microphone *" ></iframe>
</div>
<style>
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: fixed
}
.iframe-container iframe {
border: 0;
right: 0;
position: fixed;
width: 10rem;
top: 25%;
min-width: 36vw;
min-height: 71vh;
}
</style>
example
Related
I have apply below css in iframe for responsive view.Its works fine in Desktop browser but when I view in Mobile Browser ,the iframe display as half screen.Please check below code and advise how to do this...
CSS :-
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
padding-top: 75%;
}
HTML:-
<div class="iframe-container">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
if you are talking about something like below image for mobile
then this is normal behavior as image/video will adjust itself to maintain its aspect ratio
but if you want to have full height video then refer below code
<div>
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
<br>
<br>
<br>
fdfd
div {
position: relative;
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
}
https://jsfiddle.net/ytvmLu3w/
I've embedded a Google calendar in a website using an iframe. All is resizing perfectly on browsers, but on iPhone when rotating from vertical to horizontal and back to vertical the embedded calendar overflows the iframe vertically. I only have access to HTML and CSS on this site since it's a CMS.
HTML as follows:
<p class="iframe-container"><iframe allowfullscreen="" frameborder="0" src="https://calendar.google.com/calendar/embed?" width="100%"> . </iframe></p>
CSS as follows:
.iframe-container {
width: 100%;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
After weeks of looking I found the solution by trial and error, but have no idea why it's working now. Would still like to hear from experienced folks why this fixes the issue.
HTML as follows:
<div class="googleCalendar"><iframe frameborder="0" src="https://calendar.google.com/calendar/embed?"></iframe></div>
CSS as follows:
.googleCalendar{
position: relative;
height: 0;
width: 100%
overflow: hidden;
padding-bottom: 100%;
}
.googleCalendar iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
padding-bottom: 100%;
}
How do you make a youtube video full-screen width and height but make the video full size and it completely fills up the entire screen even when you resize but I don't want this to have the black bars at all when resizing.
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0;
overflow: hidden;
z-index: 1;
}
.video-container .video {
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: fixed;
left: 0;
top:0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
right: 0;
bottom: 0;
}
HTML
<div class="video-container">
<div class="video">
<iframe width="853" height="480" src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Check it out on CodePen for viewport resizing to see the responsiveness. https://codepen.io/rickydam/pen/dzyEoR/left/
Refer to this similar question.
Responsive fullscreen youtube video with no black bars?
This article sums up embedding a responsive Youtube video using CSS.
https://avexdesigns.com/responsive-youtube-embed/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to embed a video using an iframe but I'm getting some annoying overflow padding that I can't seem to get rid of.
The code at the top is a way of forcing an iframe into a responsive style so that you can view it on mobile.
Basically the 'padding-bottom' code is controlling the aspect ratio of the frame.
I got the code from here:
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
I've checked here: Making responsive iframe and this leaves me with horrible overflow too.
The result is below:
Image displaying overflow issue
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
Changing the padding-bottom: to 56.35% just moves the black overflow line to the bottom of the video instead of the side.
height 100vh will take 100% of viewport and margin:0 and padding:0 remove default properties.
Just add
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%; /* Add this */
height: 100vh; /* Add this */
padding:0px; /* Add this */
margin:0px; /* Add this */
}
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100vh;
padding:0px;
margin:0px;
}
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I just did this instead. It works - gets around the user agent style sheet that Chrome uses and applies correct styling.
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
border: 0;
overflow: hidden;
}
</style>
<div class="video-container">
<video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video>
</div>
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
i have a website and i want to embed a Youtube player as a background (full width and height) and i want to add a white bar with icons to act as buttons to activate the slider above the youtube player.
Here is a picture that may help me explain it.
Design
But when i add code past my iframe tag it wont show up on my website and it doesn´t even show up at the source code at chrome.
HTML:
<div class="video-container">
<iframe class="ytplayer" width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE?loop=1&autoplay=1&modestbranding=1&autohide=1&showinfo=0&iv_load_policy=3&controls=0&playlist=z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe>
</div>
CSS:
.video-container, #content{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -10;
}
.video-container {
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.ytplayer {
pointer-events: none;
position: absolute;
}