youtube video player overlaps the other layout when we scroll

Question

i am developing an application which can play youtube video in webview using iframe. my code is given below :

String summary = "<iframe height='"
            +  displayWidth 
            + "' width='"
            + 800
            + "' frameborder='0' src='http://www.youtube.com/embed/ZfekaIW6esA?rel=0'></iframe>";

    if (flashInstalled) {
        mWebView.loadData(summary, "text/html", null);
        container.addView(mWebView);
    } else {
        alert.setMessage("Flash player is not installed on the device!");
        alert.show();
    }

its working fine but when i zoom it and scroll it then it will overlaps the other layout Look at my screen shots

plz give me the better solution for this. thanx

Answer 1

I think your Iframe width and height are more than Webview width and height. Decrease the size of Iframe. If you want a larger size, increase the size of webview.

    <RelativeLayout
        android:id="@+id/titlebarlayout"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/titlebar2" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/searchmap" >
        </Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="@drawable/searchmap" >
        </Button>
    </RelativeLayout>

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/titlebarlayout" >

        <RelativeLayout
            android:id="@+id/webviewlayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <android.webkit.WebView
                android:id="@+id/webView1"
                android:layout_width="fill_parent"
                android:layout_height="280dp" >
            </android.webkit.WebView>

            <TextView
                android:id="@+id/textview1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/webView1"
                android:text="Chasing a target of 237 to record their third win on the trot, India needed nine runs off the last over bowled by Lasith Malinga, but Sri Lanka missed the chance to dismiss Dhoni in the fourth ball of the over when the bowler fluffed a simple run out chance; and the skipper then took three runs off the last delivery to leave Sri Lanka still searching for their first win in the tournament. There was some drama even after the last delivery as the umpires checked if the batsmen had ran one short, but replays showed they hadn&apos;t and the match ended in a tie. As an aside, Malinga had a five ball over in India&apos;s 30th over of the innings, and it is anyone&apos;s guess if the result would have been different had the error been spotted.


India stuck to the rotational policy with Sachin Tendulkar coming in for Virender Sehwag, who had a back spasm; while Irfan Pathan made another comeback as he replaced Zaheer Khan, who had a problem with his right calf. Tendulkar hit two boundaries in his 24-ball 15, but never looked comfortable in the middle, and he was the first Indian batsman to be dismissed when he edged an angled delivery around the off stump from Nuwan Kulasekara to Kumar Sangakkara behind the stumps. Tendulkar&apos;s failure is bound to be blamed on the rotational policy by its detractors, who feel the rhythm of the batsmen is disrupted.
                " >
            </TextView>
        </RelativeLayout>
    </ScrollView>

</RelativeLayout>