I currently have a vimeo video embedded into my website. (code below)
<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
As you can see I have autoplay on, and it also resizes to full width using the code above. My problem is I have just created a video on wideo.co and I need it to react in exactly the same way as the vimeo iframe above. Below is my Wideo iframe, can somebody show me how as I have tried and tried but can not seem to get it right.
<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>
Full width videos are a bit tricky. There's no one-size-fits-all, but here's the gist of it:
Create a wrapping DIV that has percentage-based padding-top (note: the value will change depending on your situation - you need to play with this value, get a calculator, use dev tools... you'll figure it out).
Position absolute the iframe within the DIV, with a top and bottom set to 0
Set the iframe width and height to auto
Here's some code:
<style>
.video-wrapper {
position: relative;
/*
Play with this value until you get the right aspect ratio.
Note: Percentage based padding is calculated by the width of the containing element.
Note 2: This value will be different for every website and/or media query...
*/
padding-top: 45%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* this will override the width=""/height="" properties defined on the iframe */
width: auto;
height: auto;
}
</style>
<div class="video-wrapper">
<iframe src="..." width="540" height="310"></iframe>
</div>
If you're lazy, you can also head over to fitvidsjs which handles creating the wrapping DIV and calculating the padding for you. It's a great piece of code and works quite nicely and does not require a calculator. I can calculate padding faster than I can go download the latest fitvids, upload it to my server, and reference it in code... but that's me.
Put the content in div and then add width="100%" to iframe code. Add autoplay back to code.
<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
Related
I am trying to embed a vimeo iframe with 100% width.
If I try like that it is not getting the full width:
<iframe title="vimeo-player" src=" <?php echo $src; ?>" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen></iframe>
If I use suggested answers in similar questions then the iframe is dissapeared:
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
Here is the link https://kappagram.tk/work/bookoo/ with fixed height but its not what I want because in smaller screens there is a blank space...
The div with the id #gallery and it's parent section both have small padding on the sides (left & right). By removing those paddings (I've used the Google Dev Tools to test it), the width cover the whole width,
Width 100% means 100% of it's parents width, but also with it's margin and padding.
I would suggest giving the width a relative length unit such as 'vw'. You can read more about relative length unit in CSS over here: W3Schools documents on CSS Units
I want to embed some Facebook posts (images) on my website, which is intended to be responsive. I am using bootstrap as a main frame for everything and it is very easy to get typical image responsiveness.
Unfortunately with Facebook posts those are iframe objects and they don't want to scale so nicely.
For my tests I am using this iframe:
<div class="iframe_div">
<div>Title</div>
<div>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fphotos%2Fa.10152384621799885.1073741831.73182029884%2F10154511546454885%2F%3Ftype%3D3&width=500" style="border:none;overflow:hidden;width:100%;height:100%;position:absolute;left:0;" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div>Tekst</div>
</div>
My problem is that when I am changing the size of the window I can sometimes see whole post and other time only top half of it. Well, more precisely it is gradually changing between those two values. Good thing is that it is never too wide, but it is not height enough to display whole.
Another issue is that it overlays the text below it, and only if I'll set some fixed value for iframe_div I am able to see it, but then it is not responsive design.
Does anyone managed to embed facebook post in responsive design page?
Replace this piece at the end of src value:
&width=500
For this:
&width=auto
And put this attribute into iframe tag:
style="width: 100%"
you have to style the container of iframe try this :
.post-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
you also need to style iframe like :
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
you can customize padding for your post.
My iframe code
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FFordIndia%2Fposts%2F4221333164585267&show_text=true&width=auto" width="500" height="660" style="border:none;overflow:hidden;width:100%;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
The issue is we set the width and height. For ex; Width=500 & height =600. This embed work without responsive issue, more than 500px. But below 500px width reduced, but height not reduced. We can't set height auto. So am trying to resolve that. We have posted more than 1000 embeds in our website, also all embeds not a same height because we include caption also. so it's not possible to responsive via CSS. So am choosing jQuery to resolve this. I need to set height same ration. Am creating below code for setup same ratio
<script>
$("iframe").each(function() {
$(this).css("height", $(this).width()*$(this).attr('height')/$(this).attr('width'));
});
</script>
This code works as what i want. But there is am getting one more issue. The issue is caption height is automatically adjust for responsive. ex; in desktop caption have 3 lines, in mobile caption have 6 lines. so first 3 lines only shown. So am think to resolve any other ways. Am suggest to my team remove captions for all posts but it's take huge time to change 1000 posts. So am set the height for post height so caption automatically hide.
Finally below single line code only sort my issues
#media screen and (max-width:500px){
.single-post iframe{max-height:87vw}
}
You should vw if you use px we responsive break every px
I have a website that I am making for a friend, and on the mobile homepage, the footer is perfectly aligned. However, when you go over to either the pics or vids page, the footer is moved over to the left side. The css file can be found here. I have no idea why this is happening, and any help to understand why this is happening, and how to fix it would be great.
Just a quick note, to access the mobile version on desktop, use chrome, open up dev tools, and click on the phone icon in the top left of the dev tools pane. Set the width to 617, and the height to 1002.
Thanks!
Your content is overflowing from the pf-content class, making the page larger than 100% width that the footer is filling.
There are a range of ways to solve this:
Add overflow hidden to pf-content (Will look nasty on small screens)
Set a min width on the whole page body{ min-width: 1200px; }
Make the videos reactive, e.g. display inline blocks which will then wrap to a new line if the page is to small. (Could also be done with media queries used to scale the videos)
I would suggest making the page more responsive, and getting the videos to flow onto new lines if the page is too small to contain multiple. As a general rule tables aren't a great way to structure anything (other than an actual data table) you'd be much better off with a more flexible element. Though this will be more work on your part.
The width of the two iframes for video are set to 520px each which exceed the resolution you were testing on.
The iframes were placed in a table, with a fixed number of columns, causing an issue of overflow.
You can place the iframes in div instead, then change the way they are displayed in css. i.e. you can do a 2 column-like structure in the desktop.css if preferred and a responsive one in the mobile.css
<div class="video-container">
<iframe src="https://player.vimeo.com/video/146191500?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<div class="video-container">
<iframe src="https://player.vimeo.com/video/141281580?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
I am developing a responsive web page using bootstrap framework, and I want to put a responsive iframe.
The bootstrap docs says that I can put a responsive 16x9 aspect ratio iframe using
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
and the css (included in the bootstrap.css) is
.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}
.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
The result is that the container of the iframe (the div with class "embed-responsive...") is responsive. This takes the correct width and height according to the resolution. But the iframe is overflowed, because it is not resized.
How can I do to resize the iframe to exactly fill the div?
I was having this problem too. I found a somewhat hack solution. In the iframe section: width:100% so it should look like:
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
I had to set a fixed value for my height because the iframe source isn't responsive.
Hope that helps.
You can use boostrap for this, but it's such a simple task that you really don't need any framework to help you with this. Check out Responsive Iframes; it's not using any frameworks, and is written in native javascript.
I wanted clients to add embedded video anywhere in the site without needing to add special markup or containers. This jQuery function makes all iframes on the page responsive and handles videos too without changing any CSS. Default aspect ratio is 16:9 but you can change the aspect ratio if you want to use 4:3 video or add your own aspect ratio (know of vertical video content being created with phones).
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
I looked everywhere but no joy, the embed code will not go 100% width and not sure why? I know on the embed link it's wider then what it showing me, so I know it should be possible.
This the code:
<iframe src="https://embed.spotify.com/?uri=spotify:user:elaina79:playlist:17AFix67QKFL33ZsZGmdNq" style="width:100%; height:480px;"
frameborder="0" allowtransparency="true"></iframe>
And looks like...
http://i.imgur.com/QmDRk6m.png
Any ideas?
Yes, the iframe dont need to use style="" to create style.. use width or height
Example: <iframe src="smthinghere" width="100%" height="100%" style="width:100%; height:480px;" />
I hope it helps you
In the documentation it states that the max width is 640px. See Player min/max sizes.
Setting a width and height attribute with 100% shows only the player and not the playlist. I don't think you have enough control over the embed to make it fully fluid.
With CSS you can do
body{
overflow: hidden;
width: 100%;
height: 100%;
}
iframe {
height: 100%;
width:96%; /* for small screen sizes */
}
and you'll have the maximum allowed width for the iframe playlist and maximum height.
I tried this script which I've seen elsewhere, which mostly resolved the issue for me:
function respondify(){
$('iframe[src*="embed.spotify.com"]').each( function() {
$(this).css('width',$(this).parent(1).width());
$(this).attr('src',$(this).attr('src'));
});
}
$(document).ready(function(){
respondify();
});
$(window).resize(function() {
respondify();
});
However, at large widths, the #outerWidgetContainer didn't go full scale (stopped at 320px) until I set the iframe to the largest widget dimensions:
<iframe src="https://embed.spotify.com/?uri=spotify:user:1271829250:playlist:39OSZ9YnShKKkuL0Yc1iMp" frameborder="0" width="640px" height="720px"></iframe>
This triggered the #outerWidgetContainer to size to width:100% and everything worked. I also set overflow:hidden on my container so it wouldn't spill out.