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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></head><body> <div style="margin-top: 20px" class="ui container"> <div class="ui embed" data-url= "https://www.youtube.com/embed/JfiKYgfxCPc" data-placeholder="https://media.w3wiki.net/wp-content/uploads/20200511124031/image30.png"> </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.w3wiki.net/wp-content/uploads/20200511124031/image30.png'
});
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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:'https://media.w3wiki.net/wp-content/uploads/20200511124031/image30.png' }); </script></body></html> |
Output:
Contact Us