verbb / vizy

A flexible visual editor for Craft CMS
Other
44 stars 8 forks source link

Docs around the media-embed #230

Open jan-dh opened 1 year ago

jan-dh commented 1 year ago

Question

It's a bit unclear to me how this exactly works, what's supported (twitter fails for example) and how to customise the embed template.

Additional context

No response

engram-design commented 1 year ago

I'll put together a user guide for this, but for most cases you shouldn't need to do anything. The value for a node is stored as JSON content that's pulled from the supplied URL, either oembed data or similar (we use https://github.com/extractus/oembed-extractor)

{
    "type":"mediaEmbed",
    "attrs":{
        "url":"https:\/\/www.youtube.com\/watch?v=jfKfPfyJRdk",
        "data":{
            "title":"lofi hip hop radio :books: - beats to relax\/study to",
            "author_name":"Lofi Girl",
            "author_url":"https:\/\/www.youtube.com\/@LofiGirl",
            "type":"video",
            "height":150,
            "width":200,
            "version":"1.0",
            "provider_name":"YouTube",
            "provider_url":"https:\/\/www.youtube.com\/",
            "thumbnail_height":360,
            "thumbnail_width":480,
            "thumbnail_url":"https:\/\/i.ytimg.com\/vi\/jfKfPfyJRdk\/hqdefault.jpg",
            "html":"<iframe width=\"200\" height=\"150\" src=\"https:\/\/www.youtube.com\/embed\/jfKfPfyJRdk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"lofi hip hop radio :books: - beats to relax\/study to\"><\/iframe>"
        }
    }
},

When rendering the node, we use attrs.data.html to render the content. This allows us to defer to the origin's desired output of the content. But you've also got free-reign to render the content however you like with that extra data there.

As for Twitter not working, that seems recent - looking into it.