Responsive video inside bootstrap modal. Also includes play/pause once user clicks on the trigger or close button.
A Pen by Angel Centeno on CodePen.
captproton captproton
This file contains 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
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta name="generator" content= | |
| "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> |
This file contains 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="slick-carousel"> | |
| <div><div class="slide-content">1 your content</div></div> | |
| <div><div class="slide-content">2 your content</div></div> | |
| <div><div class="slide-content">3 your content</div></div> | |
| <div><div class="slide-content">4 your content</div></div> | |
| <div><div class="slide-content">5 your content</div></div> | |
| <div><div class="slide-content">6 your content</div></div> | |
| <div><div class="slide-content">7 your content</div></div> | |
| <div><div class="slide-content">8 your content</div></div> | |
| <div><div class="slide-content">9 your content</div></div> |
captproton
/ Gemfile
Created
December 4, 2020 06:05
— forked from nathancolgate/Gemfile
How I built a rails interface on top of the amazing IceCube ruby gem. Video of final product: http://youtu.be/F6t-USuWPag
This file contains 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
| # Add these two gems | |
| gem 'ice_cube', '0.9.3' | |
| gem 'squeel', '1.0.16' |
This file contains 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="missionary-page-search" class="map-search"><span class="map-search-icon map-search-icon-search"></span> | |
| <span class="map-search-icon map-search-icon-loading"></span> | |
| <span class="map-search-icon map-search-icon-close"></span> | |
| <input type="text" name="map-search" placeholder="Search for a location or missionary"> | |
| <ul class="suggestions"></ul></div> | |
| <div class="wrap760" style="text-align: right;"> | |
| <div class="filters-toggle">Filters <span class="arrow">▼</span></div> | |
| </div> |
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none;"> | |
| <defs> | |
| <symbol id="compass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.7 1059.11"> | |
| <defs> | |
| </defs> | |
| <circle class="cls-1" cx="535.81" cy="528.4" r="180.08"/> | |
| <text class="cls-2" transform="translate(130.37 551.16)">W</text> | |
| <text class="cls-2" transform="translate(505.35 155.28)">N</text> |
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none;"> | |
| <defs> | |
| <symbol id="compass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.7 1059.11"> | |
| <defs> | |
| </defs> | |
| <circle class="cls-1" cx="535.81" cy="528.4" r="180.08"/> | |
| <text class="cls-2" transform="translate(130.37 551.16)">W</text> | |
| <text class="cls-2" transform="translate(505.35 155.28)">N</text> |
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none;"> | |
| <defs> | |
| <symbol id="compass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.7 1059.11"> | |
| <defs> | |
| </defs> | |
| <circle class="cls-1" cx="535.81" cy="528.4" r="180.08"/> | |
| <text class="cls-2" transform="translate(130.37 551.16)">W</text> | |
| <text class="cls-2" transform="translate(505.35 155.28)">N</text> |
This file contains 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
| <svg xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none;"> | |
| <defs> | |
| <symbol id="compass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.7 1059.11"> | |
| <defs> | |
| </defs> | |
| <circle class="cls-1" cx="535.81" cy="528.4" r="180.08"/> | |
| <text class="cls-2" transform="translate(130.37 551.16)">W</text> | |
| <text class="cls-2" transform="translate(505.35 155.28)">N</text> |
captproton
/ bootstrap-video-modal-popup.markdown
Last active
November 22, 2020 22:14
Bootstrap Video Modal Popup
This file contains 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"> | |
| <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> | |
| <!-- Video files --> | |
| <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576"> | |
| <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720"> | |
| <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080"> | |
| <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440"> | |
| <!-- Caption files --> | |
| <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" |
NewerOlder