How to create optin forms and incorporate them into WordPress web-site via OptimizePress.
… Read the restSOP – Embed YouTube Videos Lightly and Mobile Responsive
<div class="youtube-player" data-id="XXXXXXX"></div>
1. Find YouTube video id. Just watch the video on YouTube and click share. You will get the URL like this:
https://youtu.be/n8yLEsWPg-0
The last part after slash is the ID you need: https://youtu.be/……n8yLEsWPg-0
2. Place this exact code and replace the “XXXXXX” ID with the one you’ve got in the first step above.
<div class="youtube-player" data-id="XXXXXXX"></div>
Video to explain:
The script comes from Labnol
Script:
<script> /* Light YouTube Embeds by @labnol */ /* Web: http://labnol.org/?p=27941 */ document.addEventListener("DOMContentLoaded", function() { var div, n, v = document.getElementsByClassName("youtube-player"); for (n = 0; n < v.length; n++) { div = document.createElement("div"); div.setAttribute("data-id", v[n].dataset.id); div.innerHTML = labnolThumb(v[n].dataset.id); div.onclick = labnolIframe; v[n].appendChild(div); } }); function labnolThumb(id) { var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', play = '<div class="play"></div>'; return thumb.replace("ID", id) + play; } function labnolIframe() { var iframe = document.createElement("iframe"); var embed = "https://www.youtube.com/embed/ID?autoplay=1"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this); } </script>
CSS:
.youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat; cursor: pointer; }… Read the rest