Ultra Light Player для YouTube

Question

В настоящее время я создаю «ультралегкий» проигрыватель YouTube, который фокусируется на быстрой загрузке страницы и минимальных ресурсах.

Идея состоит в том, чтобы иметь пустой iframe и загружать URL-адрес встраивания youtube только с помощью ссылки, ориентированной на iframe.

Таким образом, содержимое и/или сценарии youtube не загружаются при загрузке страницы, а только после того, как пользователь решает просмотреть этот контент.

Я использовал плакат с видеоизображением с низким разрешением в качестве фонового изображения и настроил ссылку, чтобы выглядеть и чувствовать себя как кнопка воспроизведения.

Мое главное препятствие прямо сейчас - как скрыть кнопку воспроизведения после щелчка.

Я смог эмулировать эффект смены с помощью селектора «: focus» в CSS, но это не самый предпочтительный способ, потому что если вы нажмете в другом месте или даже на скрытой кнопке, появится либо кнопка, либо перезагрузка iframe.

Я знаю, что я мог бы делать это JQuery или яваскрипта путь, но я действительно пытаюсь запустить все свои приложения на чистом HTML + CSS

Любой человек может помочь? С наилучшими пожеланиями и спасибо заранее

codepen: 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

Я уже получил свой код, чтобы работать ...

Сделано это с URI данных, как в примере:

* { 
 
    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>

Привет