Semantic-UI | Embed
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
An embed displays the content from other websites like YouTube videos, Vimeo, Google maps, etc.
Example 1:
This example embedding the Youtube.
jQuery:
$('.ui.embed').embed();
Complete Code:
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href= rel="stylesheet" /> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div style="margin-top: 20px" class="ui container"> <div class="ui embed" data-url= data-placeholder= </div> </div> <script> $('.ui.embed').embed(); </script></body></html> |
Output:
Example 2:
This example specifying the details programmatically.
jQuery Code:
$('.ui.embed').embed({
source: 'youtube',
id: 'JfiKYgfxCPc',
placeholder: 'https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png'
});
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href= rel="stylesheet" /> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div style="margin-top: 20px" class="ui container"> <div class="ui embed"></div> </div> <script> $('.ui.embed').embed({ source: 'youtube', id: 'JfiKYgfxCPc', placeholder: }); </script></body></html> |
Output:
![https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png"](https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png"){kind=link}
Please Login to comment...