How to replace youtube iframe tag or thumbnails with ImageViews

Question

I' am working on app that's get content from blog pages as jsoup nodes/elements, some pages contains youtube embedded tag iframe

like this


    <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/VXD6a_LgBaQ/0.jpg" frameborder="0" height="400" src="https://www.youtube.com/embed/VXD6a_LgBaQ?feature=player_embedded" width="600"></iframe>

I'm looking for a way to replace any iframe youtube tags with imageView and display the thumbnail on it, that's when the user clicks on the image, the application opens the YouTube application through it intent and view the video.

I found answer someone here , he could replace img tags with Image Views, I succeed on get youtube link and thumbnail and view the image on ImageView

Element element = document.body();

                String youtubeThumbnailImageSrc = element.getElementsByClass
                        ("YOUTUBE-iframe-video").attr("data-thumbnail-src");

                String youTubeLink =
                        element.getElementsByClass("YOUTUBE-iframe-video").attr("src");

                Log.e("YouTube thumbnail", youtubeThumbnailImageSrc);
                Log.e("Youtube link", youTubeLink);

                if (youtubeThumbnailImageSrc.isEmpty()) {
                    youtubeThumbnailImagesetVisibility = 8;
                    intent.putExtra("youtubeThumbnailImagesetVisibility",
                            youtubeThumbnailImagesetVisibility);
                } else {
                    intent.putExtra("youTubeThumbnail", youtubeThumbnailImageSrc);
                    intent.putExtra("youTubeLink", youTubeLink);
                }

the destination it's supposed to be like this

It is not clear for me what is your problem. Which element is missing/not working. — Luk, Jan 15 '19 at 14:19
@luk I using jsoup document to parse item's content I got it from site, some pages of content contains youtube embedded tag iframe such as described above, I used jsoup elemnt method "getElementsByClass()" to get it and extract the link and the thumbnail image of youtube to view the src of it on Imageview that previously created, the problem is the content of some page contains more than one embedded youtube link, I looking for the way to find those iframe tags and replace with Image View to view the thumbnail image of it later — Dr Mido, Jan 16 '19 at 09:37

Luk · Answer 1 · 2019-01-16T13:28:15.053

When you call

 String youtubeThumbnailImageSrc = element.getElementsByClass
                    ("YOUTUBE-iframe-video").attr("data-thumbnail-src");

You will get value of attribute only for the first element.

You need to iterate manually to get all links:

    for (Element e : element.getElementsByClass
            ("YOUTUBE-iframe-video")) {
        String youtubeThumbnailImageSrc = e.attr("data-thumbnail-src");
        System.out.println(youtubeThumbnailImageSrc);
    }

How to replace youtube iframe tag or thumbnails with ImageViews

1 Answers1