mediaembed.html 2.4 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. <div data-oembed-url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://www.youtube.com/embed/ZVv7UMQPEWk" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div></div>
  19. </figure>
  20. <figure class="media">
  21. <div data-oembed-url="https://vimeo.com/1084537"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://player.vimeo.com/video/1084537" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div></div>
  22. </figure>
  23. <figure class="media">
  24. <div data-oembed-url="https://open.spotify.com/artist/7GaxyUddsPok8BuhxN6OUW?si=LM7Q50vqQ4-NYnAIcMTNuQ"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;"><iframe src="https://open.spotify.com/embed/artist/7GaxyUddsPok8BuhxN6OUW" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div></div>
  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>