Messages

Home Login Logout

Responsive iframe widget

Without any other styling, you'd get a rectangle that is 300x150 pixels in size. That's not even in the User Agent stylesheet, it's just some magical thing about iframes (and objects). That's almost certainly not what you want, so you'll often see width and height attributes right on the iframe itself.

Say you wanted to put the tricks website in an iframe widget. You'd do that like this:

{
type: 'iframe',
src: 'https://www.viraweb123.ir'
}

Without any other styling, you'd get a rectangle that is 300x150 pixels in size. That's not even in the User-Agent stylesheet, it's just some magical thing about iframes (and objects). That's almost certainly not what you want, so you'll often see width and height attributes right on the iframe itself (YouTube does this).

{
type: 'iframe',
src: 'https://www.viraweb123.ir',
widht: '600px',
heith: '300px'
}

Those attributes are good to have. It's a start toward reserving some space for the iframe that is a lot closer to how it's going to end up. Remember, layout jank is bad. But we've got more work to do since those are fixed numbers, rather than a responsive-friendly setup.

The best trick for responsive iframes, for now, is making an flex layout box. First you need a parent group with responsive size. The iframe is the child widget inside it, which you apply positioning in order to fill the area. The tricky part is that the parent element becomes the perfect height.

I'll just put a complete demo right here (that works for images too):


{
	"type": "Group",
	"name": "Parent",
	"style": {
	    "padding": "80px",
	    "background":{
	        "color": "green"
	    },
		"layout": {
			"direction": "row"
		}
	},
	"contents": [{
		"type": "iframe",
		"name": "Responsive inline frame",
		"src": "http://www.viraweb123.ir",
		"style": {
			"layout":{
				"grow": "1",
				"shrink": "1"
			}
		}
	}]
}


Every time we're dealing with flex layout box, it makes me think of a future with better handling for it. There is the experimental attribute that I could imagine being quite nice for iframes in addition to images.

Lates posts
Most visited posts

Built with love to give everyone an opportunity to say something to the world
Copyright © 2018 All rights reserved - SITE123 

Terms - Privacy - Abuse

LocalTheme

Help

سوالی دارید؟ با ما مطرح کنید !پشتیبانی آنلاین است.در حال حاضر پشتیبانی غیرفعال است.با تیم ویرا وب صحبت کنیدبا تیم ویرا وب صحبت کنید