Hello @JDW and @Martin there is a quick tutorial explaining all process:
1º - Go to YT select the video you want and select “Share” then “Embed” (Thank you @Eldar):
2º - Then press copy in the right button:
3º - You end with this code (That need to be changed - see point 4º):
<iframe width="560" height="315" src="https://www.youtube.com/embed/hpHno-HgM3w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4º - We need to add src="" in the beginning of the iframe and where you have actually the src= you need to change to data-src= so the final code will be like this:
<iframe src="" width="560" height="315" data-src="https://www.youtube.com/embed/hpHno-HgM3w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- In this point what we do is we disabled the loading of the iframe when the page loads, but we need to load it when the iframe is loaded, (defer the loading), and for that we need to add javascript code to accomplish that, so let’s go to point 5.
5º - We need this code to make the defer loading:
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
So now you are asking how the hell can I make this in blocs??? 
There you go:
Lets say you have this structure: 2 columns:
And you want to add the iframed YT video in the left column:
So you press that little “plus” icon when you hover in the left column, and add a bric called: “Code Widget” NOT the “Code Embed”:
Then you will end with this:
Some times the snippets codes don’t work very well with “Preview Content” option activated (right side under the button “Edit Code”) so normally I unselect it, then you end with this:
Ok now lets do the trick:
1º - Press the “Edit Code” on the right or click twice in the blue bar “Code Widget Content” then you will have the following box:
2º Look up on the left and you will see “Code Widget” selector, and with this option selected you will add the changed iframe code:
<iframe src="" width="560" height="315" data-src="https://www.youtube.com/embed/hpHno-HgM3w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3º - Now we need to add the code to defer the src, so we have two options:
- You only have the YT iframe in one page (This page) on the selector on the left top you select: “Page Footer”
- You have YT iframe in more then one page, then on the selector on the left top you select: “Project-Footer”
By default I use “Project” because I never know the future and in this way is all covered, so selecting the “Project-Footer” you add the defer code, but in Blocs the way you tell Blocs it is a script is by taking code inside <script> </script> tags, so there you have the code you need to insert in “Project - Footer”:
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
Then when you preview, voila there is everything working:
Even @Eldar is saying is working. 
Hope it helps you… and all users that need this too…
Thank you!
