How to add a webview to play a youtube video on it after drawing a rectangle by template matching using openCV in Java android

Question

I am Working on an App where I have to do template matching using openCv library. I have done that and drawn a rectangle on the matched template. Now I want to use a webview exactly on the rectangle to play some video. For that I am adding the webview programatically on a FrameLayout. But I am unable to adjust the positions and the dimensions of the webview on the mobile screen such that it would be placed on the rectangle.I am sharing my code snippet

 // Load the source image from a resource
        Drawable drawable = getResources().getDrawable(R.drawable.full_new);///// source from drawable
        Bitmap bitmap1 = ((BitmapDrawable) drawable).getBitmap();

        // Convert the Bitmap to a Mat object
        Mat src = new Mat();
        Utils.bitmapToMat(bitmap1, src);

        // Load the template image from a resource
        Drawable drawable2 = getResources().getDrawable(R.drawable.imgg);////// template from drawable
        Bitmap bitmap2 = ((BitmapDrawable) drawable2).getBitmap();

        // Convert the Bitmap to a Mat object
        Mat template = new Mat();
        Utils.bitmapToMat(bitmap2, template);

        // Check that the Mats are not empty
        if (src.empty()) {
            Log.e("TAGGGGGGG", "Failed to load src image!");
            return;
        }

        if (template.empty()) {
            Log.e("TAGGGGGGG", "Failed to load template image!");
            return;
        }

        // Convert images to grayscale
        Mat sourceImageGray = new Mat();
        Mat templateImageGray = new Mat();

        Imgproc.cvtColor(src, sourceImageGray, Imgproc.COLOR_BGR2GRAY);
        Imgproc.cvtColor(template, templateImageGray, Imgproc.COLOR_BGR2GRAY);

        Imgproc.GaussianBlur(sourceImageGray, sourceImageGray, new Size(3, 3), 0);
        Imgproc.GaussianBlur(templateImageGray, templateImageGray, new Size(3, 3), 0);

        // Check that the grayscale conversion worked
        if (sourceImageGray.empty()) {
            Log.e("TAGGGGGGG", "Failed to convert src image to grayscale!");
            return;
        }

        if (templateImageGray.empty()) {
            Log.e("TAGGGGGGG", "Failed to convert template image to grayscale!");
            return;
        }



        // Create a Mat object to hold the matching scores
        Mat result = new Mat(src.rows() - template.rows() + 1, src.cols() - template.cols() + 1, CvType.CV_8UC1);

        // Perform the template matching
        Imgproc.matchTemplate(sourceImageGray, templateImageGray, result, Imgproc.TM_CCOEFF_NORMED);///////////

        // Find the best match
        Core.MinMaxLocResult mmr = Core.minMaxLoc(result);
        Point maxLoc = mmr.maxLoc;

        // Draw the rectangle on the image
        int w = template.cols();
        int h = template.rows();
        Point rectPoint1 = maxLoc;
        Point rectPoint2 = new Point(maxLoc.x + w, maxLoc.y + h);
        Scalar color = new Scalar(255, 255, 0);
        int thickness = 10;
        Imgproc.rectangle(src, rectPoint1, rectPoint2, color, thickness);

        // Apply Canny edge detection on the rectangle region
        Mat rectMat = src.submat((int) rectPoint1.y, (int) rectPoint2.y, (int) rectPoint1.x, (int) rectPoint2.x);

        int webViewWidth = template.width();
        int webViewHeight = template.height();
        int webViewX = (int) (maxLoc.x + (template.cols() / 2) - (webViewWidth / 2));
        int webViewY = (int) (maxLoc.y + (template.rows() / 2) - (webViewHeight / 2));

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////



        // Create a WebView and add it to a FrameLayout
        WebView webView = new WebView(this);
        FrameLayout frameLayout = findViewById(R.id.frame);
        frameLayout.addView(webView);


        frameLayout.setX((float) rectPoint1.x);//98
        frameLayout.setY((float) rectPoint1.y);//182
        frameLayout.getLayoutParams().width =  (int)(rectPoint2.x - rectPoint1.x);;
        frameLayout.getLayoutParams().height = (int) (rectPoint2.y - rectPoint1.y);;

        webView.setBackgroundColor(Color.TRANSPARENT);
        webView.setVisibility(View.VISIBLE);
        WebSettings webSettings = webView.getSettings();

        webView.setWebChromeClient(new WebChromeClient());

        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setPluginState(WebSettings.PluginState.ON);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("http://www.youtube.com") || url.startsWith("vnd.youtube")) {
                    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
                    return true;
                }
                return false;
            }
        });


        String embedUrl = "https://www.youtube.com/embed/" + "uJIfpoRM-3U";
        webView.loadUrl(embedUrl);

        // Convert the result Mat to a Bitmap
        Bitmap bitmap = Bitmap.createBitmap(src.cols(), src.rows(), Bitmap.Config.RGB_565);
        Utils.matToBitmap(src, bitmap);

        // Set the Bitmap to an ImageView
        ImageView imageView = findViewById(R.id.image_view);
        imageView.setImageBitmap(bitmap);

I have done that and drawn a rectangle on the matched template. Now I want to use a webview exactly on the rectangle to play some video. For that I am adding the webview programatically on a FrameLayout. But I am unable to adjust the positions and the dimensions of the webview on the mobile screen such that it would be placed on the rectangle