Poster frame of embedded YouTube video larger than video - javascript

I am embedding a YouTube video into an HTML page. I want the video to appear as large as possible in the browser window. Here is the CSS that I am using for the embedded iframe:
iframe {
position: absolute;
left:0;
top:0;
height:100%;
width:100%;
overflow: hidden;
}
When the video is playing, it fits the window nicely, keeping its aspect ratio and showing empty space either above-and-below or left-and-right, as I would expect.
However, the initial poster image fills the window completely. I would like it to adjust its height and width so that it has the same dimensions and position as the video.
I thought I could access the elements in the video iframe, to discover the dimensions of the video. However, when I use document.querySelector("iframe").contentWindow.document, I get an error warning that accessing a cross-origin frame is blocked.
How can I detect the aspect ratio of the video, so that I can set the dimensions of the iframe correctly?

I have found a solution. However, it means providing hard-coded values for the dimensions of the video.
On YouTube, I right-click to bring up the "Stats for Nerds" and note the Current / Optimal Res (for example: 1280x720#30). In the HTML, I provide the relevant information as --width and --height CSS variables:
HTML:
<iframe style="
--width:1280;
--height:720;
"
src="https://www.youtube.com/embed/fUyU3lKzoio"
frameborder="0"
allowfullscreen>
</iframe>
In the CSS, I set the width and height to the full size of the window (using vw and vh units, which return the full available size on smartphones and tablets). I also cap the max-height and max-width, to ensure that the aspect ratio of the video is respected:
CSS:
iframe {
width: 100vw;
height: 100vh;
max-height: calc(100vw / var(--width) * var(--height));
max-width: calc(100vh * var(--width) / var(--height));
}

Related

Is there a way to make iframe embeds more responsive?

so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps & forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps & forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?
Here's what I have so far:
This is the look I'm going for:
Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile
You would need to use "css media queries" in order to reposition items in an html page based on screen size.
I have made an example here, please feel free to copy paste this code onto your project :).
I can see you are a new developer here, and I would like you to note for next time that it would make people's jobs easier if you could copy your code and paste it into stackoverflow instead of taking a screenshot.
(The snippet below works better when you press on expand snippet and resizes to fit browser size)
<style>
.container{
display: flex; /*Set div as flexbox to override default margins*/
}
iframe{/*Perform to all iframes*/
width: 50%;
margin: 10px;
}
#media only screen and (max-width: 900px) {/*When screen size is below 900px*/
.container{/*Make the form and map stack over each other*/
flex-direction: column;
/*flex-direction: column-reverse;*//* If you want them to stack the other way around*/
}
iframe{
width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
}
}
</style>
<div class="container">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
THE CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
Explanation of this CSS
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
After all this, you can just deal with your iframe
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

how to keep content of page from re-sizing when the page is re-size to a smaller width

hey guys please i need help on page re-size.. how do I stop the content of the page from re-sizing when the page width is re-size to a smaller width just like facebook
If you want to stop content from resizing, put the Sizes in the places marked X and Y (in pixels)
img {
height:Xpx;
width:Ypx;
}
If you want to retain the aspect ratio of your images, you should check out -
How do you prevent resizing of images in CSS?
Here's the code from there
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
or
img {
width:100%;
height:auto
}
Both of them are almost the same

Responsive dynamic images with fixed height

I'm implementing a design that has full-width images with a fixed height (or the height only changes at certain breakpoints). I want the image to always fill its container while maintaining its aspect ratio.
If I implement this as a background image, it's simple enough to add background-size: cover:
.cover {
width: 100%;
height: 500px;
background-image: url(myimage.jpg);
background-size: cover;
background-position: center;
}
http://jsfiddle.net/h7542mys/
If you try resizing the browser window, you'll see that the image covers the entire area by essentially scaling the image up.
The issue is that I want to change the image source depending on the resolution, so that I don't have to serve gigantic assets to mobile devices. If I knew the image URLs at build time, I could use media queries for that, however, these are dynamic images that I only know the URLs for at runtime.
At runtime, I can generate image URLs for cropped and resized images, so ideally I'd want to do something like:
<div class="cover">
<img src="getImageUrl('image.jpg', 320, 500)" srcset="getImageUrl('image.jpg', 320, 500) 320w, getImageUrl('image.jpg', 640, 500) 640w, getImageUrl('image.jpg', 1000, 500) 1000w" sizes="100vw">
</div>
And then somehow get the image to fill the container just like the background image would. But if I give the image a height and width of 100%, it's obviously just going to stretch. Giving the image a min-width: 100% will set it to be as wide as its parent, but the height will be smaller.
The only way I've been able to get it to work is using object-fit: cover, but that has pretty bad browser support, and the polyfills I've found haven't worked with srcset: http://jsfiddle.net/Lctosbru/
Essentially, I'd like to get the same effect as background-size: cover or object-fit: cover. Is there a way to do this?

How to set iframe width for a different class in same page

I am saving the you tube iframe video with different width and height for feeds and comments in database.For feeds i am saving the video with height 580px and width 320px.For comments,i am passing the height 480px and width 280px. In same page i had set the iframe like below,
object, iframe{
height: 320px;
width: 580px;
}
Why i had added above is because user can add twitch and vimeo video also.To override the twitch and video script's iframe height and width i added.Is it possible to set the iframe and object width and height for individual class.I tried like below,
object, iframe .feed-text{
height: 280px;
width: 40px;
}
to show the video in comments i tried the above with class name but not worked for me.
I need to set iframe height and width for two different class.Is it possible.

How to crop an image to fit the required height in the screen?

I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info

Categories

Resources