responsive iframe - Post ID 273930
Michael Rastovich
Registered User
3 posts
I have an iframe in a column and the height is responsive (100%) but I can not figure out how to make the height follow along. Please advise.
Eric Rohloff
Senior Advisor
20,271 posts
Hi Michael,
You need to apply overflow:hidden to the iframe styling
You need to apply overflow:hidden to the iframe styling
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Bainn
Registered User
99 posts
CSS example (I use it for YouTube videos)...
Step 1: CSS
Step 2:
Place your iframe in a html element, but it must be position: relative. In this particular case, the class of the html element is html-element-youtube-1
Here it is in action: http://www.championfreight.co.nz/20170522
Step 1: CSS
/* Embed YouTube */
.html-element-youtube-1 {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.html-element-youtube-1 iframe, .html-element-youtube-1 object, .html-element-youtube-1 embed {
position: absolute;
border-width: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.html-element-youtube-1 {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.html-element-youtube-1 iframe, .html-element-youtube-1 object, .html-element-youtube-1 embed {
position: absolute;
border-width: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Step 2:
Place your iframe in a html element, but it must be position: relative. In this particular case, the class of the html element is html-element-youtube-1
Here it is in action: http://www.championfreight.co.nz/20170522
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
