ckportfolio.com - Video Player and Social Media

Video Player and Social Media

Video player via Vimeo

Today's online video players are designed for sharing, and Vimeo is no exception. Note that each video is equipped with a "Share" button which reveals a code snippet that can be copied into the HTML page:

Social media widgets

Social media platforms also offer a series of widgets that web developers can use to promote their postings and pages. Facebook and Twitter offer some of the more refined widgets at your disposal:

Closely follow the provided instructions, and you will receive another set of code snippets that can be used to populate the microsite.

Finish line

This concludes this week's introduction to widget and libraries. I hope you will be able to explore these options carefully and plan your next project accordingly.

Screencast Recording

https://drive.google.com/open?id=1OV0mlx0x6GUO_WkxxZ5YV9eqYtlay1Cz

Code Sample: HTML

<!doctype html>
<html>
    <head>
        <title>Week 3</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">       
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <div id="title">
                <i class="fa fa-globe"></i> Hello world
            </div>
            <div id="content">
                <div id="content_left">
                    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=280&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="280" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>                
                </div>
                <div id="content_right">
                    <div id="video">
                        <iframe src="https://player.vimeo.com/video/682906027?h=2bbc9f08bc" width="500" height="300" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis velit laoreet, scelerisque purus eu, gravida nulla. Vestibulum ornare ornare urna a ullamcorper.</p>
                    <a href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @TwitterDev</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </div>
            </div>
            <div id="menu">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </div>
        </div>
    </body>
</html>

Code Sample: CSS

/* FOCUSING ON #VIDEO */

#video
{
    height:300px;
    background-color:black;
    margin-bottom: 20px;
}
Fin