https://www.google.com/chrome/
https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn
More tutorials: https://www.webscraper.io/
steven chaplinski ichoake
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
| <body> | |
| <div class="container"> | |
| <h1>YouTube Playlist ID Extractor</h1> | |
| <br /> | |
| <h3> Convert your YouTube copied URL to playlist id. | |
| </h3> | |
| <div> | |
| <label for="Userurl">Copy and paste the full YouTube URL containing "list=" </label> | |
| <input type="url" id="UserUrl" placeholder=" Paste your YouTube URL here!!" required> | |
| <button id="btn1" onclick="convertLink()">Create YT List ID</button><br> |
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"> | |
| <h1>Responsive YouTube Player using max-width</h1> | |
| <p> Responsive YouTube player using the iframe embed code copied and pasted from YouTube within a max-width outer container element, no JS required, works with both single and list . | |
| </p> | |
| <div class="maxwth centerAuto"><!-- this outer div class contrains the max-width of the YT-player --> | |
| <div class="playerContainer"> <!-- responsive player container here --> | |
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> |
ichoake
/ howto-download-youtube-videos.md
Created
November 9, 2022 21:56
— forked from pnhoang/howto-download-youtube-videos.md
How to download ALL videos of ANY YouTube Channel for FREE
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
| - @data = [{:alt => 'image 1',:img => 'https://images.pexels.com/photos/7919/pexels-photo.jpg'}, | |
| {:alt => 'image 2',:img => 'https://images.pexels.com/photos/774861/pexels-photo-774861.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg'}, | |
| {:alt => 'image 4',:img => 'https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg'}] |
Experimenting with flexbox to create various photo layouts for client project.
A Pen by João Sousa on CodePen.
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="case-study-gallery"> | |
| <h1 class="title">CASE STUDIES</h1> | |
| <p>This is an example of a portfolio gallery. It has some simple hover transitions and is pretty rad.</p> | |
| <div class="case-study study1"> | |
| <figure> | |
| <img class="case-study__img" src="http://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" /> | |
| </figure> | |
| <div class="case-study__overlay"> | |
| <h2 class="case-study__title">Developing Hexxis</h2> | |
| <a class="case-study__link" href="#">View Case Study</a> |
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
| <ul class="gallery-sample grid three"> | |
| <li class="top-one left-one"><img src="http://placehold.it/200x200" /></li> | |
| <li class="top-one left-two"><img src="http://placehold.it/200x200" /></li> | |
| <li class="top-one left-three"><img src="http://placehold.it/200x200" /></li> | |
| <li class="top-two left-one"><img src="http://placehold.it/200x200" /></li> | |
| <li class="top-two left-two"><img src="http://placehold.it/400x400" /></li> | |
| <li class="top-three left-one"><img src="http://placehold.it/200x200" /></li> | |
| </ul> |
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
| - @data = [{:alt => 'image 1',:img => 'https://images.pexels.com/photos/7919/pexels-photo.jpg'}, | |
| {:alt => 'image 2',:img => 'https://images.pexels.com/photos/774861/pexels-photo-774861.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg'}, | |
| {:alt => 'image 3',:img => 'https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg'}, | |
| {:alt => 'image 4',:img => 'https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg'}] |