I write this code in my HTML and CSS, it's working flawlessly in Android devices but NOT IN iOS. Can anyone help me with my code?
HTML
<ion-content overflow-scroll="true">
<div>
<iframe src="https://linkhere.com"
allowfullscreen SameSite="None" secure></iframe>
</div>
CSS
.iframe-container {
overflow: hidden;
padding-top: 500%;
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%;
}
.iframe-error iframe {
border: 0;
height: 0%;
left: 0;
position: absolute;
top: 0;
width: 0%;
}
Issue: Cannot scroll in iframe in iPhone and Unable to display properly in iPhone
Feel free to correct me. Thanks in advance!
Related
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%;
}
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;
}
I'm trying to make video container div responsive but couldn't manage it so far.
My current CSS for video and container:
.header-container{
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video{
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin:0 auto;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
height: auto;">
<source src = "webd.mp4" type = "video/mp4" >
</video>
</div>
</div>
Current look:
Current look
Could you please tell me how can I fix it? I'm still new in HTML and CSS and I really need your help & advice.
https://jsfiddle.net/mlegg10/fsftz8rt
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe>
</div>
a large deal of your code does not associate itself between html and css so it would be helpful to you to understand how it works. Firstly, video is not styled due to it being referenced as .video in your css and your video container has the opposite with the reference being video-container with no dot so your css should look like this
.header-container {
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin: 0 auto;
}
To make a view response you need to scale with its parent and to have most things with % to do this you need to add
position: relative;
to all the parents
After this you need to remove the position absolute as it will mess up your styling by making it an object that does not scale properly
Here is an example of what I think you mean:
https://jsfiddle.net/afut7y99/
Change the sliders at the sides to see how it resizes.
I'm trying to embed a chat along with my twitch stream on a Xenforo (forum software) page. I want the stream to be 16:9 so it's HD, and I want it to adjust based on the user's resolution. Here's what I have so far to do that
<style>
.twitch {I
position: left;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 30px;
overflow: hidden;
}
.twitch iframe {
position: absolute;
top: 0;
left: 0;
}
.chat {
position: right;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
}
.chat iframe {
position: absolute;
top: 0;
right: 0;
}
.twitchWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.twitchWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 70%;
}
.chatWrapper {
position: top;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 50px;
height: 0;
}
.chatWrapper iframe {
position: top;
top: 25;
right: 8;
width: 29.5%;
height: 35%;
}
</style>
<div class="twitchWrapper">
<div class="twitch">
<iframe frameborder="0" scrolling="no" src="http://www.twitch.tv/Sykikal/embed"></iframe>
</div>
</div>
<div class="chatWrapper">
<div class="chat">
<iframe frameborder="0" scrolling="no" src="http://www.videogameinfo.net/forums/chat/popup"></iframe>
</div>
</div>
There's just two problems.. The chat appears too high up, it isn't aligned with the streaming page. http://videogameinfo.net/forums/pages/stream/
The other problem is that there's too much empty space down at the bottom. I tried changing the chat wrapper to adjust the position, but even changing it to a 1 or something throws it way off and moves it too far down to the bottom. Hoping someone can help.
You have issue because you have not proper HTML structure.
The below space is because you give lots of padding to chatwrapper class and chat class.
Just remove padding-bottom: 56.25%; from both class will remove your extra space.
And another issue: The chat appears too high up because you give iframe position:absolute; and it's top is 0. Change it to more approximately 300px;. like:
.chat iframe {
position: absolute;
right: 0;
top: 300px;
}
Hope it helps.