I am trying to use youtube iFrame in my app. When I click on the full screen mode the video stretches vertically as a reel because the content in the video is like that. But I want to make the full screen mode horizontal. How can I do it using javascript or html?
I tried using css but the iframe somehow overrides my css injection. I injected my css using javascript in inline.
<iFrame>
Related
I have a responsive website WebsiteA, and I'm opening another responsive WebsiteB using an iframe.
I needed to make the iframe responsive as well (to take the full width and height of it's container div), so I did that with absolute positioning.
This is working fine in the browser, I can resize the screen and the iframe is behaving in a responsive manner, and I'm still able to interact with WebsiteB inside the iframe normally, like clicking the links, buttons ...etc
But once I use a device emulator (in chrome dev tools), or use an actual touch device (mobile, tablet), when I try to touch any of the controls (links, buttons ...etc) in the iframe (WebsiteB), then it seems that the touch events are being received at the wrong location, Therefore event handlers are not working.
Has anybody encountered this issue?
Hi I was curious how the fullscreen with scrolling works on a youtube page.
Normally when you put a video in fullscreen there is no scrolling. But for youtube they are able to make the video fullscreen (and by extension the browser) and still allow a user to scroll down the page.
I have a feeling they are doing some sort of trick and "highjacking" the fullscreen function and triggering the video to go into theatre mode.
Not sure where to start at all for the code.
YouTube just makes the whole html element full screen and changes the height and width of the video element to 100% of the height and width of the viewport.
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
I'm trying to embed the IMDB movie trailer iframe into a mobile Ionic app,
problem is that apparently their embed code can't go below 400px width, I've set the parameters for the iframe with the width value as provided by the site:
<iframe src="http://www.imdb.com/video/imdb/vi354465561/imdb/embed?autoplay=false&width=320" width="320" height="480" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="no" scrolling="no"></iframe>
but all the elements inside their html structure show a fixed width of 400px. If this is a limitation of their page, what recommended alternative can I use to display the trailer correctly over a 320px width viewport? which is what I'm using as default mobile visualisation.
The only workaround I'm applying now is to move the iframe a bit over the container so the fullscreen button is available, but this doesn't look right.
The only solution is to change the iframe's CSS and make it responsive to your vieweport, which might be possible. Try what's mentioned here: How to apply CSS to iframe?
Edit: If all fails, seems like the only fallback could be creating a scrollable container over your iframe so that the user can at least view it completely scrolling. You can do this with the CSS Overflow property
My app has a functionality that loads another route in a iframe. The intention is to change some layout settings, colors etc and see how that page will look in the browser in its final and original version (100% in a desktop or laptop).
The problem is that the iframe is loaded in a div that has something like 2/3 of the system's width (it's a Bootstrap column). This is smaller than our media-query breakpoint and the iframe content is loading the responsive design. But that breaks the rule in paragraph one.
I needed it to be a miniaturized version of the original page.
Is there a way to achieve this result?
What I am trying to do is somehow similar to this on Google's PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
THe difference is that Google takes a picture and in my app the user must be allowed to interact with the page, browse other links, click buttons etc. It is a screen simulator/previewer but not responsive.
As CBroe mentioned, the problem is that the CSS for the page loaded within the iframe is using the size of the iframe as it's viewport size. You'll want to size the iframe according to how you want the actual page to display (1200px wide, for example) then use a scale transform to reduce the size of the iframe.
Your HTML could look like:
<iframe width="1200" height="600" src="https://example.com"></iframe>
Then rescale using CSS:
iframe {
transform: scale(0.3);
transform-origin: top left;
}
Here's a live example: https://codepen.io/JoshuaToenyes/pen/gMMLze