How to create a background video page with webpgr

43 views

Skip to first unread message

Falko

unread,

Jun 12, 2014, 1:18:17 PM6/12/14

In order to do this I created a view (that is a subpage in webpgr) and a text element

then I went to YouTube and searched for a nice video. I found it and then copied the embed code, you can find it under the video in the Share tab and there the subtab Embed

I replaced the text of the text element with the copied embed code from YouTube. The text editor will however complain that this is not valid HTML. To make it valid you have to add ="" to the allow fullscreen, also the url of the video was missing a http: in my case, add this if it's not there. Your embed code should look like this

<iframe width="560" height="315" src="http://www.youtube-nocookie.com/embed/eyU3bRy2x44" frameborder="0" allowfullscreen=""></iframe>

my additions are in large bold font

In the next step I moved the video element and changed its size so that it complete overlaps the view. For this I had to play a bit around with the sizes. In addition to that I added arguments to the embed url so that the video automatically starts. Here is my final embed code:

<iframe width="760" height="415" src="http://www.youtube.com/embed/eyU3bRy2x44?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>

again my changes are in large and bold

In the last step i added a text that overlays the video. For that i created a new text element and changed its text. In addition to that i change its style in the right menu Style tab.

In the style tab I added a black transparent background, changed the font size to be larger and the font color to red. Here is the code

background-color: rgba(0, 0, 0, 0.54);
color: red;
font-size: 30px;

For the black transparent background I went to http://hex2rgba.devoth.com/ and entered 000000 which is the hex color code for black (http://en.wikipedia.org/wiki/Web_colors) and regulated the opacity to a transparent level (1.0 = not transparent, 0.0 = fully transparent, 0.5 = semi transparent)