I need to have a completely responsive video div that will work with any iframe/embed code from Vimeo, YouTube or anywhere else.
So it's in the centre of a webpage - I really do not know what is unclear about that. It's always about 90% percent of the screen size on mobile and then about 90% of the "main" on larger screens (which is itself width say 85% margin 0 auto). Just like on any normal webpage!
What I'm looking for is that on smaller screens it will NOT overflow because these iframes are usually wider. I can change the size with lots of media queries but this isn't completely satisfactory from an aesthetic point of view. I'm looking for a solution that lets the size of the video simply smoothly adapt to the screen size. It doesn't seem possible to do with videos what you can do with images for example (i.e. you simply set a percentage width and height auto)
Right now I always put videos on Vimeo and use the "responsive" code:
<div style="padding:75% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/799431830? h=ecdd366984&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Maximise your opportunities.mp4">
</iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
Related
I need to make the embedded video responsive. I tried the solution introduced here with no success. The width of video stays the same and not scales down making it look out of bounds on mobile device. How to make flickr video responsive?
Due to that fact that Chrome wasn't able to copy source code inside iframe, here is the screenshot:
<div class="flickr-embed-photo"> has an inline style with a width. Apparently it takes it from its window size, and the "window" is the iframe. And the iframe has an inline style attribute with heights and width... can you try something like
iframe {
height: auto !important;
width: 100% !important;
}
If using latest Bootstrap 4.6, you can use classes from the Embeds utility. Something like the below should work but you may need to select the proper class for your embed proportions and remove the flickr-embed-frame since flickr-embed JS could be placing inline code there.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://your-flickr-embed-url" ></iframe>
</div>
I use iframe to embed a widget from my site to the other sites.
This iframe contains several DIVs and one of them (#statements) is usually longer than the max height of iframe that I set up.
When I open it in a browser, it looks fine:
http://noduslabs.com/portfolio/hitech-companies/
However, when I hope it on an iPhone / iOS - the iframe height parameter is ignored and I see the full length of the page.
How do I avoid that?
Here's the code I currently use:
<iframe width="100%" height="660" src="http://infranodus.com/seogoogle/seoseo?background=1" frameborder="0" allowfullscreen></iframe>
Thank you!
UPDATE
In fact I don't want this iframe to be fixed height of 660, rather – that the user who embeds it could set up any height and that it would work on iOS (so 200 or 1000 - like they want).
iframe{
height:660px;
}
Put that in your css file and it should be done.
CSS height is typically preferable to explicit height declarations. In this situation especially because you can also provide a media query.
E.g.:
#media only screen and (max-height:800px){
.myiframe{
height:700px;
}
}
The controls are longer than my video here is my code. it's pretty simple
[video width="240" height="135" mp4="http://www.petersecord2014.ca/wp-content/uploads/2014/10/PeterSecordMayoraltyKick-off-Speech23July2014.mp4"][/video]
Things that I have already tried from what I have read online so far :
added control after height (no change)
made height blank (no video
because height was blank)
Try using percentages instead of px for one of your dimensions (most likely height).
I have a image with a resolution:
<iframe src="....?resolution=640x480" width="800" height="452" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
I change the width of the image, and the image doesn't change. If I specify a width of less than 640 in width="800", the image's size reduces, but more than 640 the image remains unchanged. Why?
You have an <iframe>, not an image, and its contents won’t scale beyond the actual resolution of the image (as you can see in the URL, that’s 640 pixels wide).
If you want an actual image, use <img>.
I am trying to put this live video in my public access channels website. This is the embedding that they (att-uverse) sent me. The problem is that it doesn't show the controls, but has white space above the video around the size that the controls should be.
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" scrolling="no" frameborder="0" class="video" style="width: 320px; height: 240px">
I have tried making it a block and changing the positioning, but I can't seem to get rid of the white space. I have gotten the controls to show with the use of expanding the height.
This is the best I could manage:
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" width="340px" height="254px" scrolling="auto">
The white space at the top appears to be part of the video content that is being sent to you.
I had to update my Microsoft Silverlight install on my Macbook Pro to get the video to play and once it did it had the video controls at the bottom of the video as you would expect.