How-To: Embedd a Fullscreen Vimeo Video without any Expensive Plug-ins

This tutorial demonstrates how to embed a fullscreen Vimeo video on your WordPress page. The video will autoplay, loop, and display without any toolbars or other on-screen elements. And the best about this, it is FREE and without any expensive plug-ins.

1.) Add a “Columns” block with “100/Full width” settings.

2.) Copy and paste the correct code (depending on ID structure) below in a “Custom HTML” block inside the new column.

Video URL example:
https://vimeo.com/1048840926/33ad7c0830

(This video URL consists of two ID numbers “1048840926” and “33ad7c0830”)

Code Example:

<style>
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}
</style>

<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/1048840926?h=33ad7c0830&autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Result:

Video URL example:
https://vimeo.com/76979871

(This video URL consists of one ID number “76979871”)

Code Example:

<style>
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}
</style>

<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Result: