I have a problem with a website I'm working on. Using the Safari browser, while the page is loading, the video control appear just for a second (like on the image) and then it disappears.
The main page of the website has a full-screen video but I set the controls=false in the attributes. And the main problem is that it always appears, also when there is no video in the page is loading. How can I hide it?
controls is a Boolean attribute so its very presence means that it is true, regardless of what you set it to.
Try ommitting it entirely.
Related
I would like to use a short, looping YouTube video as a background element without displaying anything in the iframe except the content of the video, and without any jarring interruptions like a black screen or elements popping back into view.
If I embed an iframe with the following URL:
https://youtube.com/embed/f1HVVf_cPm4?playlist=f1HVVf_cPm4&autoplay=1&controls=0&rel=0&showinfo=0&autohide=1&modestbranding=1&mute=1&loop=1&disablekb=1&playsinline=1
The controls are visible at first and then fade out when playing (which I also don't want, they should never be visible), but also every time the video loops there is a split second where you see the title, controls, and a black background. I added every arg that seems like it could prevent this but it is still showing. This completely defeats the purpose of hiding these elements in the first place.
Is there any way to do this in an iframe?
In my app I am displaying website using the WKWebView component but since the website has <iframe> content, scrolling does not work. The iframe content itself registers taps and swipes but it never scrolls.
When I open the same page with Safari it works well, I can interact with iframe's content and scroll without any issues.
My iframe takes full width and height of the webpage and I added this property:
-webkit-overflow-scrolling: touch;
But it does not help. Unfortunately I cannot show the webpage in question because it contains proprietary data and is behing login screen.
I would prefer to solve this without having to modify the webpage, since Safari works fine.
EDIT: It looks like the iframe might be detecting the events and not "forwarding" them, because when there is also for example navbar on the page (that is not part of the iframe) I can swipe it and scroll. However since there is very little space on the screen, I would prefer not to have any other elements apart from iframe itself.
EDIT 2: I tried to display the page from iframe directly in the WKWebView but it still does not scroll at all. Works great in Safari.
Solution: In the end I solved the issue by changing the userAgent property of the WKWebView to match either iOS 12 Safari for iPhone or iPad depending on the device. The website in question is fairly complex regarding user interaction so I guess they were sending "incorrect" settings to the browser with the default user agent.
I would look for scroll-blocking event listeners that might conditionally load. If you have some kind of touch, touchmove, click, hover javascript events they might interfere with the default logic by using e.preventDefault().
Also you need to look for such events both in framed page and host page.
Try to replace a host page and framed page to see if scroll works well with different URLs.
Try placing the iframe in a div with -webkit-overflow-scrolling which takes up the full view and make the iframe the the size of it's content.
Example from: https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
You may have to get creative with resizing the iframe to match it's content (see: Adjust width and height of iframe to fit with content in it)
I have a webpage with several IFRAMEs. When searching this page using the browser the matches in the IFRAME are cycled through after all the other matches in the main page has been cycled through.
This causes the page to jump up again, and the matches are not selected in the same order as they appear on the screen.
To see how this works check e.g. this page and search for news.
How do I make the content of the IFRAME be searchable in the same order as it appears on the screen?
I am developing this page only for webkit, but I observe the same behavior with firefox.
I have been working on an HTML5 page using CSS, and everything seems to be going well, but the page isn't loading at the top using Firefox 23. When I loaded the page in Chrome it appeared to jump to the same spot that Firefox loaded, but then jumped the page to the top.
This is where the page seems to be loading on initial load using Firefox 23.
The page can be found on the internet, http://ipatch.github.io/KegCop/
Update: I just loaded the HTML page without the stylesheet and it appears it is still loading with the undesired behavior.
You're experiencing this behavior because of the autofocus attribute you have set in your first input, it will (as the name suggests) add focus to it when the page loads
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
fb like button creates a white background on page onload in all ie versions
I have a site where portions of the content are loaded into IFrames.
The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load.
Is there any way to specify what color the empty IFrame should render as until it has content?
Or am I taking the wrong tack here - is there a good way to keep the page from rendering until the contents are ready to be displayed?
UPDATE: Looks like the "white area" bit I'm describing is IE-specific.
It's not too hard:
<iframe id="IFR" src="time.php" style="background-color: #f00;" />
Edit: I neglected to test in IE -- it does work in FireFox. Example at: http://beta.tagcloud.com/contain.html
The example demonstrates that the page quickly switches to all red, and then when the iframe loads (in 5 seconds), it switches to black.
This was driving me nuts, but I actually found a solution that seems to work in IE6 and 7. Haven't tested in other browsers, but Firefox seems to do it properly anyway.
The problem is solved if the iframe isn't displayed when loading, but an iframe seems to fire the "onload" immediately so after putting in an alert, I noticed it fires the onload twice, once at page load, then again once the iframe page loads so...
<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe>
//and here is the associated javascript
loadCount = 1;
function loadFrame() {
if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire
document.getElementById('theFrame').style.display='';
return;
}
loadCount++;
}
You could perhaps set the iframe's document and set its style before loading your content.
Or you can use Ajax and not have these issues. =] (Assuming if it's appropriate for the task, of course.)
Simpliest way to fix this to just not show the iframe until it is ready. That way you can set whatever background you want under the iframe. You set a background and prevent showing the iframe until loaded like so:
<div style="background-color:#XXXXX">
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
</div>
The only downside is if your visitor has js turned off they aren't going to see the iframe. If that is a concern for you check out http://css-tricks.com/prevent-white-flash-iframe/