| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <style>
- input {
- width: 500px;
- }
- body {
- width: 700px;
- }
- </style>
- <h2>Example URLs</h2>
- <ul>
- <li><input type="text" value="https://www.youtube.com/watch?v=H08tGjXNHO4"></li>
- <li><input type="text" value="https://open.spotify.com/album/2IXlgvecaDqOeF3viUZnPI?si=ogVw7KlcQAGZKK4Jz9QzvA"></li>
- </ul>
- <h2>Test editor</h2>
- <div id="editor">
- <h2>Media with previews</h2>
- <figure class="media">
- <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>
- </figure>
- <figure class="media">
- <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>
- </figure>
- <figure class="media">
- <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>
- </figure>
- <h2>Generic media</h2>
- <figure class="media">
- <oembed url="https://twitter.com/ckeditor/status/1021777799844126720" />
- </figure>
- <figure class="media">
- <oembed url="https://www.flickr.com/photos/nasahqphoto/28396473968/" />
- </figure>
- <figure class="media">
- <oembed url="https://www.instagram.com/p/BmMZgokAGGQ/?taken-by=nasa" />
- </figure>
- <figure class="media">
- <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" />
- </figure>
- <figure class="media">
- <oembed url="https://www.facebook.com/ckeditor/posts/1885390224856207" />
- </figure>
- <figure class="media">
- <oembed url="https://ckeditor.com" />
- </figure>
- </div>
|