I have searched this forum and this topic has not been addressed properly. I have a link to an ESPN news article i want to display in an iFrame. The ESPN site is fully responsive.
Note* I realize you cant control the third party embed properties
Here is the Issue. When previewing this document on a desktop the iframe and content inside works properly.
However when i view this same document on a mobile device such as iOS, the content in the iFrame does not respond the same way as it does on a desktop. The Content expands and you have to scroll left, right, up and down to see everything.
My desired result is to have the responsive embedded content fit in the iframe in the same way it does when vied on a desktop.
The site is returning a lot of errors due blocked iframe origin so it is hard to tell whats really going on.
I had a search on google with the idea that you need to set the user agent of the iframe, since that is what I think is not correctly being set.
I also removed the surrounding div and space around the iframe html in the innerHTML
I used this which seems to work to some extent but I have not broken this code down and suspect that it is a bit old in API usage but gives you the idea…
it would be best if you looked around along this line…
Ran at scene load.
var ua = document.getElementById('UserAgent').value = navigator.userAgent;
setUserAgent(document.querySelector('iframe').contentWindow, ua);
function setUserAgent(window, userAgent) {
if (window.navigator.userAgent != userAgent) {
var userAgentProp = { get: function () { return userAgent; } };
try {
Object.defineProperty(window.navigator, 'userAgent', userAgentProp);
} catch (e) {
window.navigator = Object.create(navigator, {
userAgent: userAgentProp
});
}
}
}