Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Embed

  • Last Updated : 06 Jan, 2022

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: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!