超軽量YouTubeプレーヤー

Question

私は現在、「超軽量」のYouTubeプレーヤーを構築しており、高速なページの読み込みと必要最小限のリソースに焦点を当てています。

アイデアは、空のiframeを持っているだけではiframeをターゲットにリンクしてユーチューブ埋め込みURLをロードすることです。

この方法では、ユーチューブのコンテンツおよび/またはスクリプトは、ページのロード時にロードされていないが、ユーザーはそのコンテンツを見ることを決定した後にのみ。

低解像度のYouTube動画ポスターを背景画像として使用し、再生ボタンのようなルック＆フィールのリンクをカスタマイズしました。

私の主な障害は、クリックした後に再生ボタンを非表示にする方法です。

CSSで「：focus」セレクタを使用して非表示エフェクトをエミュレートすることはできましたが、別の場所や隠しボタンをクリックしてもボタンが表示されるか、iframeが再読み込みされるため好ましい方法ではありません。

は、私はこのjQueryのまたはJavaScriptの道をやっている可能性が知っているが、私は本当に

誰でも助けることができる純粋なHTML + CSS上のすべての私のアプリを実行しようとしていますか？事前に 敬具と感謝

codepen：

の例のようにデータのURIとそれを作ったhttp://codepen.io/s3m3nT3s/pen/NdwEMx

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#video { 
 
    width: 100%; 
 
    max-width: 700px; 
 
    position: relative; 
 
    background: url(http://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg) no-repeat; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
#video::before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 56.25%; 
 
} 
 

 
#video a { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
    width: 68px; 
 
    height: 48px; 
 
    background-color: #1f1f1f; 
 
    opacity: 0.8; 
 
    text-align: center; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    line-height: 48px; 
 
    border-radius: 17px/13px; 
 
} 
 
#video a:hover { 
 
    background-color: #cd201f; 
 
    opacity: 1; 
 
} 
 
#video a:focus { 
 
    opacity: 0; 
 
} 
 

 
iframe { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    border: none; 
 
}

<div id="video"> 
 
    <iframe name="youtube-video"></iframe> 
 
    <a href="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;showinfo=0&amp;autoplay=1" target="youtube-video" rel="nofollow">&#9654;</a> 
 
</div>

Answer 1

私はすでに私のコードが動作するようになりました...：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#video { 
 
    width: 100%; 
 
    max-width: 700px; 
 
    position: relative; 
 
    background: url(http://img.youtube.com/vi/c73BsSHOCwQ/mqdefault.jpg) no-repeat; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
#video:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 56.25%; 
 
} 
 

 
#video:after { 
 
    content: "▶"; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
    width: 68px; 
 
    height: 48px; 
 
    background-color: #1f1f1f; 
 
    opacity: 0.8; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 48px; 
 
    border-radius: 17px/13px; 
 
    z-index: 1; 
 
} 
 

 
#video:hover:after { 
 
    background-color: #cd201f; 
 
    opacity: 1; 
 
} 
 

 
iframe { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    border: none; 
 
    z-index: 2; 
 
}

<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no"> 
 
<div id="video"> 
 
\t <iframe src="data:text/html;charset=utf-8,%3Ca%20style%3D%22display%3Ainline-block%3Bwidth%3A100%25%3Bheight%3A100%25%22%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fc73BsSHOCwQ%3Frel%3D0%26showinfo%3D0%26autoplay%3D1%22%20rel%3D%22nofollow%22%3E%3C%2Fa%3E" allowfullscreen></iframe> 
 
</div>

よろしく