![]() Its possible to calculate the dimensions of the content in the iframe, but how exactly it should be done, depends a bit on the content itself, and a lot of the used CSS (absolutely positioned. But in this question, the aspect ratio is variable. You could combine an image and an iframe with will result in a responsive iframe. This shows how to make an iframe responsive, assuming the aspect ratio of the content is 16:9. Here’s a simple & reliable method to create a responsive iframe using just HTML, and CSS with the intrinsic ratio technique. Add a comment 6 Answers Sorted by: Reset to default 116 Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. ![]() This makes the content fluid as a percentage unit is used, it also has a max-width set as I don't want the video displaying wider than 640pxįrom here we need to add in a HTML container around the video and declare the CSS. Can you make a jsfiddle Lets see your code. Place the iframe code on your page, in this example above the iframe's container div (div.youtubevideowrap) has 2 CSS declarations for width, it has a width:80% and a max-width:640px. The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site. This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file. The problem of this iframe code is that the iframe is fixed size (560px in width and 384px in height) and is not responsive to different window dimensions. This means the width and height of gallery will change depending on the website size. To make an HTML5 video responsive is a little more complex than an image. The src of the iframe links to another responsive website (hereby known as 'gallery'). To make it resize on mobile (Responsive), We need to play with CSS. It calculates the width and height ratio of the iframe and adapts both to your needs (in this case I assumed you wanted it to fill the containers width). The code triggers upon clicking the button. I am able to embed the iframe, however, the object runs off of the screen on a mobile device. I took the liberty of using jQuery instead of javascript to do this. I am attempting to embed an iframe object onto a page of my wordpress website. Basically, when you add a video on your website using HTM5
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |