Youtube videos

Developer
Moncho Varela
Size
3,592 Kb
Views
54,648
  1. Youtube videos Previews
  2. Youtube videos HTML Codes
  3. Youtube videos CSS Codes
  4. Youtube videos JS Codes

How do I make an youtube videos?

Make more fast your web with this to embed videos. If not show videos you need activate html5 video option of youtube.. What is a youtube videos? How do you make a youtube videos? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Youtube videos Previews
IQ Test

Youtube videos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Youtube videos</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Racing+Sans+One);
body{ background:#2c3e50; margin:0 auto; padding:0; text-align:center;
}
h1{ text-align:center; color:#ecf0f1; font-family:'Racing Sans One', cursive; text-shadow:0 2px 2px #0c0e50;
}
.youtube_videos{ list-style:none; margin:0 auto; display:block; padding:0;
}
.youtube_videos .youtube{ display:inline-block; margin-bottom:1em; margin-right:0.5em; margin-left:0.5em; margin-top:0;
}
.youtube,.thumb{ width:380px; height:250px; cursor:pointer; position:relative; -webkit-box-shadow:0 0.5px 2px #1D242B; -moz-box-shadow:0 0.5px 2px #1D242B; box-shadow:0 0.5px 2px #1D242B;
}
.youtube_video{ width:385px; height:250px;
}
.thumb,.youtube_video{ padding:5px; background:#34495e; border:0; outline:0;
}
.youtube:after{ content:"PLAY THIS VIDEO"; position:absolute; top:5px; left:5px; width:370px; height:240px; padding:0; margin:0; padding:5px; background:rgba(38, 180, 174, 0.66); text-align:center; line-height:250px; font-family:'Racing Sans One', cursive; color:transparent; -webkit-transition:all 0.8s ease; -moz-transition:all 0.8s ease; -o-transition:all 0.8s ease; transition:all 0.8s ease;
}
.youtube:hover:after{ top:110px; left:110px; width:165px; height:40px; line-height:40px; background:#34495e; -webkit-transition:all 0.8s ease; -moz-transition:all 0.8s ease; -o-transition:all 0.8s ease; transition:all 0.8s ease; color:#ecf0f1;
}
/* = Responsive comming soon :)
---------------------------------*/
/* Desktop */
@media (min-width:980px) {}
/* Mobile */
@media (max-width:480px) {}
/* Tablet */
@media (max-width:767px) {}
@media (min-width:768px) and (max-width:979px) {} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Nakome Music videos</h1>
<ul class="youtube_videos"> <li class="youtube" id="cZM3UNR3-Mg"></li> <li class="youtube" id="fsjfEbDxcrc"></li> <li class="youtube" id="xS_A8bkO8GQ"></li> <li class="youtube" id="EmdEhn7Sf40"></li> <li class="youtube" id="4NckFt4Bu0Q"></li> <li class="youtube" id="JIVkN2KsvGU"></li> <li class="youtube" id="XSTGMNMdFac"></li> <li class="youtube" id="-ADp-gb92bw"></li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Youtube videos - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Racing+Sans+One);
body{ background:#2c3e50; margin:0 auto; padding:0; text-align:center;
}
h1{ text-align:center; color:#ecf0f1; font-family:'Racing Sans One', cursive; text-shadow:0 2px 2px #0c0e50;
}
.youtube_videos{ list-style:none; margin:0 auto; display:block; padding:0;
}
.youtube_videos .youtube{ display:inline-block; margin-bottom:1em; margin-right:0.5em; margin-left:0.5em; margin-top:0;
}
.youtube,.thumb{ width:380px; height:250px; cursor:pointer; position:relative; -webkit-box-shadow:0 0.5px 2px #1D242B; -moz-box-shadow:0 0.5px 2px #1D242B; box-shadow:0 0.5px 2px #1D242B;
}
.youtube_video{ width:385px; height:250px;
}
.thumb,.youtube_video{ padding:5px; background:#34495e; border:0; outline:0;
}
.youtube:after{ content:"PLAY THIS VIDEO"; position:absolute; top:5px; left:5px; width:370px; height:240px; padding:0; margin:0; padding:5px; background:rgba(38, 180, 174, 0.66); text-align:center; line-height:250px; font-family:'Racing Sans One', cursive; color:transparent; -webkit-transition:all 0.8s ease; -moz-transition:all 0.8s ease; -o-transition:all 0.8s ease; transition:all 0.8s ease;
}
.youtube:hover:after{ top:110px; left:110px; width:165px; height:40px; line-height:40px; background:#34495e; -webkit-transition:all 0.8s ease; -moz-transition:all 0.8s ease; -o-transition:all 0.8s ease; transition:all 0.8s ease; color:#ecf0f1;
}
/* = Responsive comming soon :)
---------------------------------*/
/* Desktop */
@media (min-width:980px) {}
/* Mobile */
@media (max-width:480px) {}
/* Tablet */
@media (max-width:767px) {}
@media (min-width:768px) and (max-width:979px) {}

Youtube videos - Script Codes JS Codes

// Loop selectors
var videos = document.querySelectorAll(".youtube");
for (var i=0; i<videos.length; i++) { var youtube = videos[i]; // Get function getVideos(youtube);
}
// Get videos function
function getVideos(el){ var img = document.createElement("img"); // Get images img.setAttribute('src', 'http://i.ytimg.com/vi/'+el.id+'/hqdefault.jpg'); // Add class to img img.setAttribute('class', 'thumb'); // Make div to embed videos var video = document.createElement("div"); // Remove this if you like video.setAttribute("class","video_here"); // Insert tags el.appendChild(img); el.appendChild(video); // On click get video el.addEventListener('click',function(){ var iframe = document.createElement("iframe"); iframe.setAttribute('class','youtube_video'); iframe.setAttribute('src','http://www.youtube.com/embed/'+ this.id +'?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1'); // Remplace img for video this.parentNode.replaceChild(iframe, this); },false);
}
Youtube videos - Script Codes
Youtube videos - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4
Size 3,592 Kb
Views 54,648
Do you need developer help for Youtube videos?

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!

Moncho Varela (nakome) Script Codes
Name
Simple Calendar with json events
Responsive table with json data.
Filter divs only Javascript
Calendar with json events mobile concept
Simple lightbox
One page theme
A Pen by Moncho Varela
Welcome
Get json with data attributes
Data uri converter
Create amazing marketing copy with AI!

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!