Scrolling effect on Android after embedding youtube videos with Iframe - android

I am making a slider with three different videos. I have some problems regarding the youtube videos embedding as if i embed the videos using object parameter, it works fine on each and every device except on MAC. I applied an alternative for this as i embedded the videos using iframe, now its fine everywhere but the problem occured is, the scrolling effect of the screen has stopped working on Android phones. I have tried applying js codes but still its stuck on Android. URL for my design is as follows if anybody wants to test the design on their end:
http://g-axon.com/minisite/
Please provide a proper solution if you have any.

Try not setting the divs with the class oneByOne_item to display:none.
Setting them to display:none will actually remove them from the render DOM.
And you dont need to that since the container is overflow:hidden anyway..

Related

Xamarin's WebView Scrolling Acts Strange on Certain Devices

In recent months, I've been developing a Mobile App on Android using Xamarin and MvvmCross.
There is a current issue I've been trying to seek out without any luck.
It's a WebView with some javascript injected. On some devices when you start scrolling a nested list it will also scroll the entire page.
I've changed the website to include the overscroll-y on the elements for the list.
Here are some video examples. If someone could give some insight on why this is happening.
MOTO6: https://youtu.be/-DGOXW2lYOs
Lenovo:
https://youtu.be/ZuxUm1olTpY

android webview youtube iframe like in feedly?

I'm making post activity that has long html that can have many youtube iframes or 0 iframes (uknown count) in it.
The default webview youtube iframe has a lot of bugs. It is not autoscaling on rotation, it has not full screen button, and it continues to play after exit from activity to other and a bit buggy.
But I found in feedly almost same but without these bugs. Here screenshot.
How did they do it?
YouTube provides API to embed videos on android application. Its easy to use and very flexible. Please refer to this tutorial for integration.
A project that ports the IFrame API to Android can be found on PierfrancescoSoffritti/android-youtube-player.
Very easy to integrate and very smooth, but doesn't seem to work on all devices yet.
The player you posted might do it the same way. Just have a look at the source files.

Changing iframe src breaks scrolling in Android Phonegap application

I've an interesting bug here for a Phonegap application in android. I first noticed that the scrolling wasn't working in the emulator, or on some specific devices (It does work on my phone, wich is platform 2.3) and tried every recommendation to fix that including multiple here in SO suggesting; 1, native side fixes and 2, adding the iScroll library. However, none of the solutions worked. Also the unavailable scrolling only affected specific pages, and not the entire app.
I've narrowed the problem down to this line of code, which replaces the src attribute of an iframe. It is intended to show the thumbnail of a youtube video where the url is being obtained via an external content api.
$('#video').attr('src', newUrl);
and the iFrame markup
<iframe class="youtube-player" id="video" type="text/html" src="js/views/loading.html" frameborder="0"></iframe>
I've tried hard coding the url in the markup, and it works fine, It's something about the act of replacing the iframe's source that breaks page scrolling.
I'm sing Phonegap/Cordova 1.8.1 and the minimum target android platform is 2.2
Thank you in advance for any help.
*Edit: Seems to be something involved with the viewport as removing the tag stops whatever is breaking the scrolling.
I had a similar issue with an Android application I was creating using PhoneGap. The issue I had was that as the data in the iframe changed, the amount of scroll-able space changed as well so some pages would scroll too far and some not enough.
In order to fix this, you have to use some JavaScript to adjust the height of the iframe based on it's content when the content is loaded.
I found my answer from this question: Phonegap HTML5 / Android App - Iframe height issue
The answer from that question suggests using the onload attribute on the iframe to call a javascript function that adjusts the height of the iframe to match the content.
The javascript itself looks like this: where obj is the iframe element that gets passed into the function.
function resizeIFrame(obj){
obj.style.height = obj.contentWindow.document.body.offsetHeight + "px";
}
Now, anytime the source of the iframe changes, it will adjust the height based on that content and should fix your scrolling issue.

Phonegap Application Not Scrolling

I have developed a Phonegap application, and am now trying to run it in the android emulator. My problem is that the application doesn't scroll in the emulator or device, but it works well in a normal browser like mozilla or chrome. Butwhen I test in the emulator or device then it doesn't scroll.
Here is my html file http://pastie.org/3981916
And here is my css file http://pastie.org/3981918
I am not able to find a solution to this problem, can any one help me out please?
well you cant get the normal html scroll behavior when trying to create a app using phonegap on android.
you cant get the overflow:scroll effect for any of the html elements.
you'll need to make use of third party libraries such as jquerymobile, iscroll4, etcfor getting the native look and feel.
or also you can construct your own logic

Android iFrame Browser Support

Does anyone know how well the iFrame HTML tag is supported on Android? Some of my preliminary research indicates that it is supported, but scrolling can be hit or miss and should be avoided. Is there documentation on this anywhere or am I going to have to get ahold of devices to test on?
Android supports the iFrame tag but not the scroll attribute. I had the same issue. Leave off the scroll attribute and the iFrame will display.
I don't know how Android handles frames, plus different Android roms use different browsers.
What I do know is that as of HTML5 frames are deprecated, therefore not a very good practise. If not anything you are going to have more and more compatibility issues with new browsers in the future.
Why don't you do the request on the same page? If the downloader.php has the proper headers the download process should start without breaking or changing the current page at all.
Hence sorry to say but Android has no support for iframe though ios have it.

Categories

Resources