I'm trying to create a Youtube Embedded video on my responsive website.
Since I am using 3 media screen ( for phone, tablet and pc/laptop ). The problem is when I embed this code
<iframe width="560" height="315" src="//www.youtube.com/embed/kHqY2Bkva7A?rel=0" frameborder="0" allowfullscreen></iframe>
it works well on desktop, cause the width resolution is bigger than 560. But, when I open it with phone, it becomes disaster, because the max width is 480.
Anyone could help to solve this problem? Can I make the youtube embedded video responsive aswell ?
Thank you before
CSS:
.iframe-parent-div {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.iframe-parent-div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
add 'iframe-parent-div' class to the parent div of the iframe tag
Related
I am trying to embed a youtube video on bearblog.
My goal is for the video to be variable width (for viewing on phone / computer), and for youtube fullscreen capability to be enabled.
I followed the instructions here https://stackoverflow.com/a/49887085/10792715 and here YouTube iframe embed - full screen
/* Set your aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
/* width: 100%; */
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* And set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and I embedded the video as
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"
allowfullscreen></iframe>
</div>
</div>
However, even though the video is variable width, there is no fullscreen capability. It simply says
Full screen is unavailable.
Find out more
I tried all kinds of tricks
allowFullScreen="true"
allowFullScreen="allowFullScreen"
allowFullScreen
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
but none worked.
PS.
Following the advice of #Marco Aurelio Fernandez Reyes, I checked the console, and this is what I got:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"></iframe>
</div>
</div>
i.e., the fullscreen commands are just ignored.
This was not a problem of html or css, but rather a problem of bearblog.dev.
The problem was fixed and now fullscreen works correctly.
I made a banner list thenk put my website, on desktop there is no problem bu on mobile its cutting the banners.
Mobile view
this is my iframe placement code:
<iframe scrolling="no" width="75%" height="670"src="/html/banners.html"></iframe>
<style>
iframe {
margin: 0 auto;
display: block;
}
#media(min-width:480px) {
iframe {
height:750px !important;
}
</style>
and this is my banner list codes: Banner list code
How can I resolve thisheight issue? can yoou please help me?
Many thanks.
Please refer to this article Using David J Bradshaw's iframe-resizer to solve iframe height and width issues.
You can to add a containing wrapper around the iframe.
<div class="iframe-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0">
</iframe>
</div>
Then. you can add css.
.iframe-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
How to make the iframe in responsive with full width
iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
iframe, object, embed {
max-width: 100%;
}
This is my code but not working
Note:
If we have used height in pixels(IFRAME Tag) then comes correctly in full width. But not working in responsive
what is the solution?
I think this is what you are looking for. I assume that you are using YouTube so just paste in the embed link where the other link is.
HTML
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I used this guide: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
I used the same method for my own website and it works great. Hope this helps you out!
When my browser window is shrunk the YouTube video in my main div doesn't shrink with the browser. I tried some code I found online that was going to "solve" the problem, but it never turned out well and didn't look good. My biggest problem with it, was that the video never stayed centered as the browser window shrunk.
This is the code from the website:
HTML:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Question: Does anybody know how I can have an embedded YouTube video be responsive while staying centered (both vertically and horizontally) in the div that it's located in?
Here is my code: http://jsfiddle.net/MyersAN/xk700bng/
I tried with this class
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and add div element with youtube embedded code
<div class="videowrapper">
<iframe width="560" height="349" src="link" frameborder="0" allowfullscreen></iframe>
</div>
It works, also you should follow this tutorial with demo code.