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 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.
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.
https://drive.google.com/file/d/1BbTskhVuml5fP-d9DZURLsv9QV6uD7_g/view?usp=drive_link
(Updated October 29, 2023)
<!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>
/* FOCUSING ON #VIDEO */
#video
{
height:300px;
background-color:black;
margin-bottom: 20px;
}