b29

iiiiiiiiiiiiiii

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.6.0/flatly/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/custom-youtube-gallery/assets/css/main.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel2@2.2.2/dist/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <title>Custom Youtube Video Gallery With jQuery Example</title>
  </head>
  <body>

</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
    
          
          <div class="col-lg-10 mx-auto py-4">
            <div class="embed__container">
              <div id="player"></div>
            </div>
            <div class="carousel__wrap mt-3">
              <div class="owl-carousel">
                <div data-video="llHdGL6EuYA" class="item video-thumb active">
                  <img src="https://img.youtube.com/vi/llHdGL6EuYA/hqdefault.jpg"
                  />
                </div>
                <div data-video="hrQxU86T0RM" class="item video-thumb">
                  <img src="https://img.youtube.com/vi/hrQxU86T0RM/hqdefault.jpg"
                  />
                </div>
                <div data-video="Eb5dsG7L7lo" class="item video-thumb">
                  <img src="https://img.youtube.com/vi/Eb5dsG7L7lo/hqdefault.jpg"
                  />
                </div>
                <div data-video="I-GCkm7Kbac" class="item video-thumb">
                  <img src="https://img.youtube.com/vi/I-GCkm7Kbac/hqdefault.jpg"
                  />
                </div>
                <div data-video="D1s8LGqC-Oo" class="item video-thumb">
                  <img src="https://img.youtube.com/vi/D1s8LGqC-Oo/hqdefault.jpg"
                  />
                </div>
                <div data-video="QqK2wtD-7AQ" class="item video-thumb">
                  <img src="https://img.youtube.com/vi/QqK2wtD-7AQ/hqdefault.jpg"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/owl.carousel2@2.2.2/dist/owl.carousel.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/custom-youtube-gallery/assets/js/main.js"></script>
    <script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script>
try {
  fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", { method: 'HEAD', mode: 'no-cors' })).then(function(response) {
    return true;
  }).catch(function(e) {
    var carbonScript = document.createElement("script");
    carbonScript.src = "//cdn.carbonads.com/carbon.js?serve=CK7DKKQU&placement=wwwjqueryscriptnet";
    carbonScript.id = "_carbonads_js";
    document.getElementById("carbon-block").appendChild(carbonScript);
  });
} catch (error) {
  console.log(error);
}
</script>
  </body>
</html>

iiiiiiiiiiiiiii

Custom Youtube Video Gallery With jQuery Example ...

Đọc thêm »

nen moi

nen moi

Đọc thêm »

ti vi

<!--
    Icon Images are coming from my github account.
    Thumbnail images are coming directly from youtube.

Visit the behance project to see the behind the sences
    // link will be shared soon

Please leave a love!
-->

<div id="vli-info">
      <div id="upper-info">
        <div id="li-titles">
          <div class="title">Web Development Videos</div>
          <div class="sub-title">
            <a class="channel" href="https://www.youtube.com/channel/UCD7RHHe-SuFiTWEsC0S1dLg">Rejwan Islam</a>
            -
            <span id="video-count">1 / 2</span>
          </div>
        </div>
        <div id="drop-icon"></div>
      </div>
      <div id="lower-info">
        <div id="btn-repeat"></div>
        <div id="btn-suffle"></div>
        <div id="btn-save"></div>
      </div>
    </div>

<div id="vli-videos">
      <div class="video-con active-con" video="https://www.youtube.com/embed/BVyTt3QJfIA">
        <div class="index title">0</div>
        <div class="thumb">
          <img alt="" src="https://i.ytimg.com/vi/BVyTt3QJfIA/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDNZqTQuBOTuGgLFnsrstzTBdJhgg">
        </div>
        <div class="v-titles">
          <div class="title">Google chrome custom new tab</div>
          <div class="sub-title">
            <a class="channel" href="https://www.youtube.com/channel/UCD7RHHe-SuFiTWEsC0S1dLg" target="_blank">Rejwan Islam</a>
          </div>
        </div>
      </div>

<div class="video-con" video="https://www.youtube.com/embed/O-D1VsX7J4s">
        <div class="index title">0</div>
        <div class="thumb">
          <img alt="" src="https://i.ytimg.com/vi/O-D1VsX7J4s/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAmbtXY8Fuq9TWBwe9KPru9q6nnyg">
        </div>
        <div class="v-titles">
          <div class="title">Awesome Periodic Table using Html and Css</div>
          <div class="sub-title">
            <a class="channel" href="https://www.youtube.com/channel/UCD7RHHe-SuFiTWEsC0S1dLg" target="_blank">Rejwan Islam</a>
          </div>
        </div>
      </div>

<div class="video-con" video="https://www.youtube.com/embed/glqWxsQmY3U">
        <div class="index title">0</div>
        <div class="thumb">
          <img alt="" src="https://i.ytimg.com/vi/glqWxsQmY3U/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLA32gZV0D42Si70gSXZ3B4Aoz4P1w">
        </div>
        <div class="v-titles">
          <div class="title">JavaScript Debugging - Android Button Effect</div>
          <div class="sub-title">
            <a class="channel" href="https://www.youtube.com/channel/UCD7RHHe-SuFiTWEsC0S1dLg" target="_blank">Rejwan Islam</a>
          </div>
        </div>
      </div>

<div class="video-con" video="https://www.youtube.com/embed/Eg4hPSMRtds">
        <div class="index title">0</div>
        <div class="thumb">
          <img alt="" src="https://i.ytimg.com/vi/Eg4hPSMRtds/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBrnuS1go5YalWfku7pWWqScHvkkQ">
        </div>
        <div class="v-titles">
          <div class="title">Calculator: Parallel and series resistance</div>
          <div class="sub-title">
            <a class="channel" href="https://www.youtube.com/channel/UCD7RHHe-SuFiTWEsC0S1dLg" target="_blank">Rejwan Islam</a>
          </div>
        </div>
      </div>

</div>

</div>
</div>
<style>

/*
    Pure CSSS
    I'm using flexbox
    Varaibles you see in the root are actively in use
*/

:root {
  --primary: #fbfcfc;
  --active: #f1f1f1;
  --secondary: #767777;
  --grey: #8a8b8b;
  --b-pad: 10px;
  --s-pad: 5px;
  --bg: rgb(50, 50, 50);
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: var(--bg);
}

a.channel {
  color: inherit;
  text-decoration: none;
}
a.channel:hover {
  text-decoration: underline;
}

.title {
  color: var(--secondary);
  font-size: 15px;
  font-weight: bold;
}
.sub-title {
  color: var(--grey);
  font-size: 13px;
}
.icon-active {
  filter: sepia(100%) hue-rotate(150deg) saturate(400%);
}

#video-dis1 {
  flex: 0;
  margin-right: 20px;
  background: black;
}
#video-dis iframe {
  width: 7000px;
  height: 433px;
}
.video-li {
  flex: 3.5;
  display: flex;
  padding: var(--b-pad);
  border-radius: 3px;
  flex-direction: column;
  background: var(--primary);
}
.li-collapsed {
  overflow: hidden;
  height: 40px;
}
#vli-info {
  flex: 3;
  padding: 0 var(--b-pad) 0 var(--b-pad);
}

#upper-info {
  display: flex;
}

#li-titles {
  flex: 9;
}
#li-titles div {
  padding-bottom: 5px;
}

#drop-icon {
  flex: 1;
  cursor: pointer;
  background: url(https://user-images.githubusercontent.com/50569315/118832584-92350500-b8e2-11eb-8398-9a90a4615b98.png)
    no-repeat center;
  background-size: 50%;
}

#lower-info {
  display: flex;
  padding-top: var(--b-pad);
}
#lower-info div {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
#btn-repeat {
  margin-right: var(--b-pad);
  background: url(https://user-images.githubusercontent.com/50569315/118832591-93663200-b8e2-11eb-8b98-3b177304b555.png)
    no-repeat left;
  background-size: 50%;
}
#btn-suffle {
  margin-right: var(--b-pad);
  background: url(https://user-images.githubusercontent.com/50569315/118832597-93fec880-b8e2-11eb-9146-f978064eddb1.png)
    no-repeat left;
  background-size: 45%;
}
#btn-save {
  margin-left: auto;
  order: 2;
  right: 10px;
  margin-right: var(--b-pad);
  background: url(https://user-images.githubusercontent.com/50569315/118832594-93fec880-b8e2-11eb-8201-12cb52be231f.png)
    no-repeat right;
  background-size: 60%;
}

#vli-videos {
  flex: 7;
  overflow: auto;
}

.video-con {
  display: flex;
  cursor: pointer;
  padding: var(--s-pad);
  column-gap: var(--s-pad);
  margin-bottom: var(--b-pad);
}
.video-con:hover,
.active-con {
  background: var(--active);
}
.index {
  min-width: 15px;
  align-self: center;
}
.thumb {
  width: 100px;
  height: 60px;
  background: var(--secondary);
}
.thumb img {
  width: 100%;
}
.v-titles {
  flex: 6;
}
.v-titles div:nth-child(2) {
  margin-top: var(--s-pad);
}

@media only screen and (max-width: 1150px) {
  #playlist {
    width: 95vw;
    height: 60vh;
  }
}
@media only screen and (max-width: 950px) {
  #playlist {
    top: 10%;
    width: 50vw;
    margin: 0 auto;
    display: block;
    align-items: center;
    transform: translate(-50%, 0%);
  }
  #video-dis {
    margin-bottom: var(--b-pad);
    width: 100%;
    height: 300px;
  }
}
@media only screen and (max-width: 800px) {
  #playlist {
    width: 60vw;
  }
}
@media only screen and (max-width: 650px) {
  #playlist {
    width: 80vw;
  }
}

</style>

/*
    Every single line of code is pure JavaScript.
    I've provided comments for some important parts of the code
    
    Happy Programming...
*/

// utlity
function qs(elem) {
  return document.querySelector(elem);
}
function qsa(elem) {
  return document.querySelectorAll(elem);
}

// globals
var activeCon = 0,
  totalCons = 0;

// elements
const v_cons = qsa(".video-con"),
  a_cons = qsa(".active-con"),
  v_count = qs("#video-count"),
  info_btns = qsa("#lower-info div"),
  drop_icon = qs("#drop-icon"),
  video_list = qs("#v-list"),
  display = qs("#display-frame");

// activate container
function activate(con) {
  deactivateAll();
  indexAll();
  countVideos(con.querySelector(".index").innerHTML);
  con.classList.add("active-con");
  con.querySelector(".index").innerHTML = "►";
}
// deactivate all container
function deactivateAll() {
  v_cons.forEach((container) => {
    container.classList.remove("active-con");
  });
}
// index containers
function indexAll() {
  var i = 1;
  v_cons.forEach((container) => {
    container.querySelector(".index").innerHTML = i;
    i++;
  });
}
// update video count
function countVideos(active) {
  v_count.innerHTML = active + " / " + v_cons.length;
}
// icon activate
function toggle_icon(btn) {
  if (btn.classList.contains("icon-active")) {
    btn.classList.remove("icon-active");
  } else btn.classList.add("icon-active");
}
// toggle video list
function toggle_list() {
  if (video_list.classList.contains("li-collapsed")) {
    drop_icon.style.transform = "rotate(0deg)";
    video_list.classList.remove("li-collapsed");
  } else {
    drop_icon.style.transform = "rotate(180deg)";
    video_list.classList.add("li-collapsed");
  }
}
function loadVideo(url) {
  display.setAttribute("src", url);
}

//******************
// Main Function heres
//******************
window.addEventListener("load", function () {
  // starting calls
  indexAll(); // container indexes
  countVideos(1);
  activate(v_cons[0]);
  loadVideo(v_cons[0].getAttribute("video"));

// Event handeling goes here
  // on each video container click
  v_cons.forEach((container) => {
    container.addEventListener("click", () => {
      activate(container);
      loadVideo(container.getAttribute("video"));
    });
  });
  // on each button click
  info_btns.forEach((button) => {
    button.addEventListener("click", () => {
      toggle_icon(button);
    });
  });
  // drop icon click
  drop_icon.addEventListener("click", () => {
    toggle_list();
  });
});

</script>

ti vi

Web Development Videos Rejwan Islam - 1 ...

Đọc thêm »

upa nh

upa nh

Đọc thêm »

An hoi Giang va Trang

An hoi Giang va Trang

Đọc thêm »