I use this design to view the video. Very convenient and reduces page load time.

document.getElementById("video").onclick = function() { var id = this.dataset.id; theIframe = document.createElement('iframe'); theIframe.src = '//www.youtube.com/embed/' + id + '?rel=0&autoplay=1&showinfo=0'; theIframe.onclick = function () {this.parentElement.removeChild(this);}; this.parentNode.insertBefore(theIframe, this.nextSibling); } 
 .video-block { width: 280px; height: 160px; margin: 30px auto; background-position: center; background-size: cover; cursor: pointer; } #video + iframe { position: fixed; z-index: 11; top: 0; left: 0; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border: solid rgba(0,0,0,.9); border-width: 8vh 5vw; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="video-block" id="video" data-id="xcJtL7QggTI" style="background-image: url(//img.youtube.com/vi/xcJtL7QggTI/mqdefault.jpg)"></div>

When inserting code here, for some reason, the id is constantly changing, but it doesn’t matter, the general principle is clear.

There is a working version of this code.

There are two questions in general. How to add the ability to expand the video to the full width of the screen? If you add theIframe.src theIframe.src, nothing changes.

The second question, the addition of buttons / icons close. Is it possible to add it in some way with the current code? Or is it necessary before creating an iframe to create a block in which the player will be nested and to set the block already a dimming style, a button for closing the block, etc.? How to better and easier to realize this moment?

Thank you in advance!

  • Do you need full page or full screen? And with closing: you can create another block with this code. When clicking on it, the video will close - Yuri
  • Yes, you need the entire screen, the standard player functionality (right bottom button). It is not active now, possibly due to the fact that the player is not being created at the time of loading the page. By closing it is approximately understandable, or create an icon separately and place it in a corner, or insert an iframe into a block. The main question on allowfullscreen. - Alexander Goroshev
  • Yes, I wrote about it. For some reason on this site ID is constantly being replaced. Here you can look. - Alexander Goroshev

1 answer 1

The fact is that you in the iframe do not have permission to deploy. You need to add this line to the opening iframe: theIframe.setAttribute("allowfullscreen", "true")

Here is a working example: jsfiddle-e7mx3ze0

  • Oh, this is what I was looking for. rather, I tried to add an attribute to .src , as in the usual insert, but I had to add it through .setAttribute , I did not even think about it. Thank you very much) - Alexander Goroshev