Fluid full-width vimeo element
How do I make an fluid full-width vimeo element?
An experiment with vimeo embed frames.. What is a fluid full-width vimeo element? How do you make a fluid full-width vimeo element? This script and codes were developed by Joseph on 21 November 2022, Monday.
Fluid full-width vimeo element - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fluid full-width vimeo element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="player-container">
<iframe id="myplayer" src="//player.vimeo.com/video/40690439?title=0&byline=0&portrait=0&autoplay=1&loop=1" width="500" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fluid full-width vimeo element - Script Codes CSS Codes
body::-webkit-scrollbar { display: none; }
body { padding:0px; margin:0px; }
#player-container { position:absolute; overflow:hidden; margin:0px; padding:0px; top:0px; left:0px; }
#content { position:absolute; margin-top:35px; }
Fluid full-width vimeo element - Script Codes JS Codes
$(window).resize(function() { AdjustPlayer(); });
$(document).ready(function() { AdjustPlayer();
});
function AdjustPlayer() { var WindowWidth= $(window).width(); var PlayerHeight = WindowWidth*0.5; $('#myplayer').width(WindowWidth); $('#myplayer').height(PlayerHeight); $('#content').css('top',PlayerHeight); }
Developer | Joseph |
Username | jibbon |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,242 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Large canvas mousemove experiment | 2,885 Kb |
Simple responsive fullscreen slider | 2,997 Kb |
A Pen by Joseph | 1,826 Kb |
Css only parallax | 5,628 Kb |
NEW SPACE COLONY | 2,681 Kb |
3d transform card flip | 2,276 Kb |
NEW SPACE COLONY - safe | 2,150 Kb |
Fluid poster wall | 2,856 Kb |
3d image canvas play | 3,181 Kb |
Mousy canvas experiment | 2,076 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Tic Tac Toe | Volv | 4,862 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Project_one | MOHIM | 9,592 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!