8
0

semanticmediaembed.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <style>
  2. input {
  3. width: 500px;
  4. }
  5. body {
  6. width: 700px;
  7. }
  8. </style>
  9. <h2>Example URLs</h2>
  10. <ul>
  11. <li><input type="text" value="https://www.youtube.com/watch?v=H08tGjXNHO4"></li>
  12. <li><input type="text" value="https://open.spotify.com/album/2IXlgvecaDqOeF3viUZnPI?si=ogVw7KlcQAGZKK4Jz9QzvA"></li>
  13. </ul>
  14. <h2>Test editor</h2>
  15. <div id="editor">
  16. <h2>Media with previews</h2>
  17. <figure class="media">
  18. <oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk" />
  19. </figure>
  20. <figure class="media">
  21. <oembed url="https://vimeo.com/1084537" />
  22. </figure>
  23. <figure class="media">
  24. <oembed url="https://open.spotify.com/artist/7GaxyUddsPok8BuhxN6OUW?si=LM7Q50vqQ4-NYnAIcMTNuQ" />
  25. </figure>
  26. <h2>Generic media</h2>
  27. <figure class="media">
  28. <oembed url="https://twitter.com/ckeditor/status/1021777799844126720" />
  29. </figure>
  30. <figure class="media">
  31. <oembed url="https://www.flickr.com/photos/nasahqphoto/28396473968/" />
  32. </figure>
  33. <figure class="media">
  34. <oembed url="https://www.instagram.com/p/BmMZgokAGGQ/?taken-by=nasa" />
  35. </figure>
  36. <figure class="media">
  37. <oembed url="https://www.google.com/maps/place/Poland/@51.9537505,19.1343786,6z/data=!3m1!4b1!4m5!3m4!1s0x47009964a4640bbb:0x97573ca49cc55ea!8m2!3d51.919438!4d19.145136?hl=en" />
  38. </figure>
  39. <figure class="media">
  40. <oembed url="https://www.facebook.com/ckeditor/posts/1885390224856207" />
  41. </figure>
  42. <figure class="media">
  43. <oembed url="https://ckeditor.com" />
  44. </figure>
  45. </div>