Stack of images, with actually one image and some :before and :after magic.
A Pen by Daniel Riemer on CodePen.
steven chaplinski ichoake
ichoake
/ flexible-columns-fixed-width-gutter.markdown
Created
November 13, 2022 15:26
Flexible columns – fixed width gutter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="fullsize-video-bg"> | |
| <div class="inner"> | |
| <div> | |
| <h1>Responsive Background Video</h1> | |
| <p>with color and dot-grid overlay | |
| </div> | |
| </div> | |
| <div id="video-viewport"> | |
| <video width="1920" height="1280" autoplay muted loop> | |
| <source src="https://storage.googleapis.com/coverr-main/mp4/Winter-Grass.mp4" type="video/mp4" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="videoyoutube"> | |
| <div class="video-responsive"> | |
| <div class="video-youtube loader" data-src="//www.youtube.com/embed/oSK4cwJeIDA"></div> | |
| </div> | |
| </div> | |
| <script type='text/javascript'> | |
| //<![CDATA[ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| section.example-1 | |
| p Tiles Example | |
| .container | |
| .col | |
| .tile: .wrap | |
| .col | |
| .tile: .wrap | |
| .col | |
| .tile: .wrap | |
| .col |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="row"> | |
| <div class="landingpage-content-wrapper"> | |
| <div class="video-content-wrapper"> | |
| <div class="video-stage"> | |
| <div class="video-image-container"> | |
| <div class="video-responsive"> | |
| <img src="http://placehold.it/1500/?text=1"> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="video-background"> | |
| <div class="video-foreground"> | |
| <iframe id="background_vid" src="http://www.youtube.com/embed/videoseries?controls=0&showinfo=0&rel=0&autoplay=1&mute=1&loop=1&list=PLCF042F294768BFD1&index=23" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div id="vidbox" class="videobox "> | |
| <!-- wrapper for player style makes it responsive --> | |
| <video class="videoplayer" id="player" controls autoplay> | |
| <source src="https://drive.google.com/uc?export=view&id=1q9SovdOhj-e4RN0JGyPHRt3ESqYTiAuE" type="video/mp4"> | |
| </video> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Responsive JS YouTube playlist loader and player, (no API keys required) comes without any interruptions from annoying adds between videos! (don't tell YT) ideal for music, parties and dancing , listen enjoy! Want a FREE unlimited player? upload code to Blogger/BlogSpot page | |
| Now you can Copy Paste your own or any full YouTube playlist ID playlist https://*****list=PLo16_*********************" | |
| I have also added control buttons as YT controls are not visible on most mobile devices and a very simple YouTube shuffle command to create a new random list sequence , with extra code to play first video in the newly created list sequence . " index(0)" . | |
| Smash the love button. Leave a comment | |
| YT player help docs = https://developers.google.com/youtube/iframe_api_reference--> | |
| <body> | |
| <div class="container"> | |
| <!-- enable border in style to help see things --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Responsive YouTube shuffled playlist player, comes without any interruptions from annoying adds between videos! (don't tell YT) ideal for music , listen enjoy! | |
| Loads your or any YouTube playlist ID "PLo16_*********************" into the 'YT iframe player', within a responsive container <div> . Using the very simple YouTube shuffle command a new list sequence is created . I've added extra code to play first video in the new created list sequence . " index(0)" , I have also added a few control buttons as YT controls are not visible on most mobile devices. | |
| YT player help docs = https://developers.google.com/youtube/iframe_api_reference--> | |
| <body> | |
| <div> | |
| <h1>Responsive YouTube Shuffled Playlist Player.</h1> |