JSFiddle - React, Tailwind, and code Playground
by Jim_Toth
HTML
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/jarallax@1/dist/jarallax.min.js"></script>
<style>
*{padding:0;margin:0;}
.jarallax {
position: relative;
z-index: 0;
height: 100vh;
}
.jarallax > .jarallax-img {
position: absolute;
object-fit: cover;
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.jarallax > video {
position: absolute;
object-fit: cover;
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<!-- Background Local Video Parallax -->
<div class="jarallax">
Your content here...
<video loop autoplay muted playsinline webkit-playsinline>
<source src="http://192.168.1.55/vid.mp4" type="video/mp4">
</video>
</div>
<article id="post-563" class="post-563 post type-post status-publish format-standard hentry category-uncategorized">
<header class="entry-header">
<h1 class="entry-title">MIT engineers made a cheaper and more efficient device to trap carbon dioxide</h1> <div class="entry-meta">
<span class="posted-on">Posted on <a href="http://192.168.1.55/rivista/2019/10/03/563/?customize_changeset_uuid=3ecdc296-8755-4993-a570-3d6727e43eff&customize_autosaved=on" rel="bookmark"><time class="entry-date published" datetime="2019-10-03T10:06:55+00:00">October 3, 2019</time><time class="updated" datetime="2019-12-02T10:09:28+00:00">December 2, 2019</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://192.168.1.55/rivista/author/admin/?customize_changeset_uuid=3ecdc296-8755-4993-a570-3d6727e43eff&customize_autosaved=on">admin</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Capturing carbon...