YouTubeクローンを作成する方法.YouTubeのクローン、HTML、CSS、JS.

49538 ワード
webdev html css javascript テキストリンク
こんにちは、ようこそ.今日、私たちは、HTML、CSS、およびJSのみを使用してYouTubeクローンを簡単に作成する方法を見るでしょう.他のライブラリはありません.また、YouTubeから実際のデータを取得するYouTube APIを使用します.
当社のクローン機能がたくさんあります.閉じるこの動画はお気に入りから削除されています.すべてのビデオデータはYouTubeから直接来ている.我々はまた、公式YouTubeの検索ページにユーザーをリダイレクトする検索バーを操作している.そして、ユーザーがビデオカードをクリックするたびに、彼/彼女はYouTubeの公式ビデオページにリダイレクトされます.
デモを参照したり、完全なコーディングチュートリアルビデオをしたい.下記のチュートリアルを見ることができます.

ビデオチュートリアル
それで、より多くの時間を浪費することなく、これをコード化する方法を見ましょう.

コード
,
まず、このプロジェクトにはindex.html , style.css and app.js . 私たちは非常に基本的なCSSを使用しますので、各CSSプロパティを説明することはありません.しかし、あなたが疑いを持っているならば、コメントで私に自由に尋ねてください.JavaScriptの各ラインを理解します.
まずはNavbarを作りましょう.私たちのnavbarのHTML構造.
<nav class="navbar">
    <div class="toggle-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <img src="img/logo.PNG" class="logo" alt="">
    <div class="search-box">
        <input type="text" class="search-bar" placeholder="search">
        <button class="search-btn"><img src="img/search.PNG" alt=""></button>
    </div>
    <div class="user-options">
        <img src="img/video.PNG" class="icon" alt="">
        <img src="img/grid.PNG" class="icon" alt="">
        <img src="img/bell.PNG" class="icon" alt="">
        <div class="user-dp">
            <img src="img/profile-pic.png" alt="">
        </div>
    </div>
</nav>
出力

今、それにいくつかのCSSを与える.
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: none;
}

body{
    position: relative;
    background: #f0f0f0;
    font-family: 'roboto', sans-serif;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 2.5vw;
}

.toggle-btn{
    width: 20px;
    height: 10px;
    position: relative;
    cursor: pointer;
}

.toggle-btn span{
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: #979797;
}

.toggle-btn span:nth-child(1){
    top: 0;
}

.toggle-btn span:nth-child(3){
    top: 100%;
}

.logo{
    height: 30px;
    margin: -10px 30px 0;
}

.search-box{
    position: relative;
    max-width: 500px;
    width: 50%;
    height: 35px;
    display: flex;
}

.search-bar{
    width: 85%;
    height: 100%;
    border: 2px solid #dbdbdb;
    padding: 0 20px;
    font-size: 16px;
    text-transform: capitalize;
}

.search-btn{
    width: 15%;
    height: 100%;
    background: #f0f0f0;
    border: 2px solid #dbdbdb;
    padding: 5px 0;
    border-left: none;
}

.search-btn img{
    height: 100%;
}

.user-options{
    height: 35px;
    display: flex;
    margin-left: auto;
    align-items: center;
}

.user-options .icon{
    height: 80%;
    margin-right: 20px;
    cursor: pointer;
}

.user-dp{
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.user-dp img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
出力

今すぐサイドネーブルを作成します.
<div class="side-bar">
    <a href="#" class="links active"><img src="img/home.PNG" alt="">home</a>
    <a href="#" class="links"><img src="img/explore.PNG" alt="">explore</a>
    <a href="#" class="links"><img src="img/subscription.PNG" alt="">subscription</a>
    <hr class="seperator">
    <a href="#" class="links"><img src="img/library.PNG" alt="">library</a>
    <a href="#" class="links"><img src="img/history.PNG" alt="">history</a>
    <a href="#" class="links"><img src="img/your-video.PNG" alt="">your video</a>
    <a href="#" class="links"><img src="img/watch-later.PNG" alt="">watch leater</a>
    <a href="#" class="links"><img src="img/liked video.PNG" alt="">like video</a>
    <a href="#" class="links"><img src="img/show more.PNG" alt="">show more</a>
</div>
CSS
.side-bar{
    position: fixed;
    top: 60px;
    left: 0;
    min-width: 250px;
    width: 250px;
    height: calc(100vh - 60px);
    background: #fff;
    padding-right: 10px;
}

.links{
    display: block;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: #242424;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.links img{
    height: 25px;
    margin-right: 20px;
}

.links:hover,
.links.active{
    background: rgba(0, 0, 0, 0.1);
}

.seperator{
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}
出力

今、フィルタのオプション
<div class="filters">
    <button class="filter-options active">all</button>
    <button class="filter-options">CSS</button>
    <button class="filter-options">web development</button>
    <button class="filter-options">python</button>
    <button class="filter-options">entertainment</button>
    <button class="filter-options">marvel</button>
    <button class="filter-options">javascript</button>
    <button class="filter-options">artificial intelligence</button>
    <button class="filter-options">machine learning</button>
    <button class="filter-options">trending</button>
</div>
CSS
.filters{
    position: fixed;
    left: 250px;
    top: 60px;
    width: calc(100% - 250px);
    height: 60px;
    background: #fff;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    padding: 0 20px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.filters::-webkit-scrollbar{
    display: none;
}

.filter-options{
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 50px;
    background: #f0f0f0;
    border: 1px solid #dbdbdb;
    text-transform: capitalize;
    margin-right: 10px;
    color: #242424;
    font-size: 15px;
    cursor: pointer;
}

.filter-options.active{
    color: #fff;
    background: #242424;
}
出力

今最後と主なこと.ビデオカードを作る.私たちは動的にJSからカードを作成します.だから、スタイリングの目的のために我々はHTMLで単一のカードを作成しています.すべてのビデオカードのコンテナーを作成してください.
<div class="video-container">
    <div class="video">
        <img src="img/profile-pic.png" class="thumbnail" alt="">
        <div class="content">
            <img src="img/profile-pic.png" class="channel-icon" alt="">
            <div class="info">
                <h4 class="title">youtube clone 2021 | create working youtube clone</h4>
                <p class="channel-name">modern web</p>
            </div>
        </div>
    </div>
</div>
CSS
.video-container{
    width: calc(100% - 250px);
    margin-top: 120px;
    margin-left: 250px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-gap: 20px 5px;
    overflow-x: hidden;
}

.video{
    min-height: 250px;
    height: auto;
}

.thumbnail{
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.content{
    width: 100%;
    height: 100px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.channel-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.title{
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.channel-name{
    font-size: 14px;
    margin: 2px 0;
    color: #979797;
}
出力

今、我々は我々のスタイルを作りました.我々は、HTMLカード構造を必要としません.だから、コメント.
<div class="video-container">
    <!-- <div class="video">
        <img src="img/profile-pic.png" class="thumbnail" alt="">
        <div class="content">
            <img src="img/profile-pic.png" class="channel-icon" alt="">
            <div class="info">
                <h4 class="title">youtube clone 2021 | create working youtube clone</h4>
                <p class="channel-name">modern web</p>
            </div>
        </div>
    </div> -->
</div>
今すぐ行ってYouTubeのAPIキーを作成します.YouTube APIキーを作成する方法を知ってください.API Key .
一度あなたのAPIキーを得た.あなたの変数にそれを格納するapp.js ファイル.
let api_key = "your api key";
今すぐビデオをフェッチします.YouTube APIルートが必要です.これは、YouTubeのドキュメントで罰金を科すことができます.

このリンクをjsファイルに追加します.
let api_key = "your api key";
let video_http = "https://www.googleapis.com/youtube/v3/videos?";

Note: add "?" at the last of the link because we need to add some parameters to this link.


今フェッチメソッドを使用するfetch() YouTubeからデータを取得するには
fetch(video_http + new URLSearchParams({
    key: api_key,
    part: 'snippet',
    chart: 'mostPopular',
    maxResults: 50,
    regionCode: 'IN'
}))
.then(res => res.json())
.then(data => {
    data.items.forEach(item => {
        getChannelIcon(item);
    })
})
.catch(err => console.log(err));

解説
YouTubeドキュメンテーションから得られた「VideoRound HTTP」からデータを取得しているのがわかります.そして、我々が使用しているURLにパラメータを追加するにはnew URLSearchParama(object) . コードに記載されているパラメーターを渡します.彼らは皆自明です.part PARAMは、この場合のデータのアートを定義します.だから、パスsnippet .
データを取得した後、JSONres.json() . YouTubeのデータ構造を見ることができます.

我々が望むすべてのデータは、アイテムの配列です.JSONデータからres.json() ループスルーdata.items 使用forEach() メソッドをコールし、その項目を関数getChannelIcon(item) .
この関数は何ですか?閉じるこの動画はお気に入りから削除されています.これは、すべてのチャンネルのアイコンが含まれています.そして、我々はチャンネルアイコンも欲しいです.それで、我々は別々にアイコンをフェッチしなければなりません.を使う
YouTubeのドキュメンテーションでチャンネルデータのためにHTTPを見つけて、見つけてください.

そして、このHTTPを我々の店に保管してくださいapp.js ファイル.我々の下video_http 変数.
let video_http = "https://www.googleapis.com/youtube/v3/videos?";
let channel_http = "https://www.googleapis.com/youtube/v3/channels?";
また、“?”リンクの最後に.
そして今、getChannelIcon 関数.
const getChannelIcon = (video_data) => {
    fetch(channel_http + new URLSearchParams({
        key: api_key,
        part: 'snippet',
        id: video_data.snippet.channelId
    }))
    .then(res => res.json())
    .then(data => {
        video_data.channelThumbnail = data.items[0].snippet.thumbnails.default.url;
        makeVideoCard(video_data);
    })
}

解説
この機能の中で、私たちは個々のビデオのデータを得ています.そして、個々のビデオのデータを取得した後、我々はチャンネル情報のYouTube APIへの要求を行っている.再び使用URLSearchParam パラメータを追加するにはパスvideo_data.snippet.channelId 内部id PARAMレスポンスの後、それを呼び出しによってJSONに変えるres.json() とJSONにデータを変換した後.セットvideo_data.channelThumbnail to data.items[0].snippet.thumbnails.default.url .
これによって、我々は正常に我々の実際のビデオのデータにチャンネルアイコンURLを加えました.
この後、私たちは別の関数makeVideoCard(data) . この関数はカードを作成することです.
さて、ビデオカードを作成します.しかし、この関数を作成する前に、HTMLからビデオコンテナ要素を選択します.
const videoCardContainer = document.querySelector('.video-container');

const makeVideoCard = (data) => {
    videoCardContainer.innerHTML += `
    <div class="video" onclick="location.href = 'https://youtube.com/watch?v=${data.id}'">
        <img src="${data.snippet.thumbnails.high.url}" class="thumbnail" alt="">
        <div class="content">
            <img src="${data.channelThumbnail}" class="channel-icon" alt="">
            <div class="info">
                <h4 class="title">${data.snippet.title}</h4>
                <p class="channel-name">${data.snippet.channelTitle}</p>
            </div>
        </div>
    </div>
    `;
}

解説
この関数の内部では、ビデオコンテナ要素の使用中にカードを添付しなければなりませんinnerHTML HTMLコードを内部に追加する方法videoContainer 要素.忘れずに+= の代わりに= HTMLを追加したくないのでHTMLを書き換えません.
そして、我々はすでに我々のHTMLカード構造を持って追加します.コードをコピーして貼り付けます.でも使うtemplate string はい.それで、テキストで変数を加えるのは簡単です.
そして、HTML構造を貼り付けた後、実際の画像ソースとタイトルを削除する${variable} 変数を追加する場合.
最後にvideo 元素使用onclick="location.href = 'https://youtube.com/watch?v=${data.id}'" Clickイベントを追加するには
私たちのビデオカードが行われます.
出力


最後のもの
検索ボックス機能を最初に検索ボックスを選択し、検索ボタンを作成します.
const searchInput = document.querySelector('.search-bar');
const searchBtn = document.querySelector('.search-btn');
また、検索ルートを格納する変数を作成します.
let searchLink = "https://www.youtube.com/results?search_query=";
さて、私はこのリンクを得たところから.下の画像を見ることができます.

これは、YouTubeを使用して動画を検索する実際のリンクです.我々はこのURLを使用することができますsearch_query PARAM
今、我々は我々のリンクを得ました.ボタンをクリックして検索ボックスを有効にします.このように.
searchBtn.addEventListener('click', () => {
    if(searchInput.value.length){
        location.href = searchLink + searchInput.value;
    }
})
そして、その内部の使用location.href ユーザーをリダイレクトするには
もう終わりです.
それで、それです.私は、あなたが各々とすべてを理解したことを望みます.あなたが疑いを持っているか、私が何かを逃したならば、コメントで私に知らせてください.

あなたが役に立つかもしれない記事




    • 閉じるこの動画はお気に入りから削除されています.私は素晴らしいWebコンテンツを作成します.
    読書ありがとう.
    contains()メソッドを使用して特定の文字を検索する
    mysqlよくある面接問題