How to put 'responsive' Youtube-player on landing page?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
ShadowMakerSdR
 
 
Posts: 8
Joined: Fri Oct 06, 2017 11:56 am

How to put 'responsive' Youtube-player on landing page?

Post by ShadowMakerSdR » Fri Oct 06, 2017 12:05 pm

Hi, I'm trying to adapt this template

http://www.wysiwygwebbuilder.com/suppor ... gsoon.html

I'd like to replace the countdown counter with a Youtube video.
I noticed that the background image (the beach) fills my complete browser screen and adapts its size if I resize the browser.
That's cool. But when I add a YT player it just sits there at a fixed size.
I noticed that if I create a layoutgrid I could just put a YT player in the middle column of a 3 column grid and it would work as I'd like.
But as far as I can tell there is no way to put a layoutgrid on that first layer.
But when I replace the layer with a grid, it doesn't fill the complete screen like the layer does.
I have the feeling I'm overlooking something, but I don't know what it is.

User avatar
BaconFries
 
 
Posts: 4487
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to put 'responsive' Youtube-player on landing page?

Post by BaconFries » Fri Oct 06, 2017 12:40 pm

In the YouTube object select enable 'Fill entire browser window' this will then set the video as a background. This option is also available for Vimeo and HTML5 video.
Example:
Video Background Template

ShadowMakerSdR
 
 
Posts: 8
Joined: Fri Oct 06, 2017 11:56 am

Re: How to put 'responsive' Youtube-player on landing page?

Post by ShadowMakerSdR » Sat Oct 07, 2017 11:48 am

Thank you for your reply. Perhaps I didn't explain my goal clearly enough.
I want to put an adaptive player say at 60% of the browser window width on top of the screen filling image (the beach in the example).
For some reason the beach image resizes to accomodate the changing browser size, but the YT player I put inside the layer doesn't adapt its size.
And I can't figure out what I need to change to do this.

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to put 'responsive' Youtube-player on landing page?

Post by Pablo » Sat Oct 07, 2017 12:45 pm

If you place a YouTube object inside a layout grid then it will resize automctally.

ShadowMakerSdR
 
 
Posts: 8
Joined: Fri Oct 06, 2017 11:56 am

Re: How to put 'responsive' Youtube-player on landing page?

Post by ShadowMakerSdR » Sat Oct 07, 2017 2:58 pm

Pablo wrote:
Sat Oct 07, 2017 12:45 pm
If you place a YouTube object inside a layout grid then it will resize automctally.
This I noticed. But I couldn't find a way for that layout grid to be part of the floating layer 'coming soon'.
As far as I could tell, a layout grid doesn't fill a whole screen, because it's adaptive.
I'm trying to get best of both worlds. :-)

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to put 'responsive' Youtube-player on landing page?

Post by Pablo » Sat Oct 07, 2017 3:34 pm

A layout grid is always full width.
The height of the layout grid depends on the content.

Note that in 'Blocks' there is a fullscreen/floating YouTube video background example.

ShadowMakerSdR
 
 
Posts: 8
Joined: Fri Oct 06, 2017 11:56 am

Re: How to put 'responsive' Youtube-player on landing page?

Post by ShadowMakerSdR » Sat Oct 07, 2017 5:15 pm

I can't seem to find 'Blocks'.
On what page of the templates is that one?
The height of the layout grid depends on the content.
So is it possible to put a fullscreen layer/box/whatever inside the grid to force it to be fullscreen?

EDIT: Sorry. You mean the 'blocks' feature of the program. I thought it was a template name like 'clouds' or 'portfolio'.
I'll check the program out.

Many thanks for taking the time to help people out.


ShadowMakerSdR
 
 
Posts: 8
Joined: Fri Oct 06, 2017 11:56 am

Re: How to put 'responsive' Youtube-player on landing page?

Post by ShadowMakerSdR » Sat Oct 07, 2017 5:43 pm

I can see two: one with 'video background' with a space image and one with a palm tree and a nice beach video.
I don't think I've managed to make my question clear enough. I don't want a fullscreen video. I want a fullscreen background image (like in the 'coming soon' template) with a Youtube player centered in the browser window that adapts its size if I resize the browser, in the way a layout grid does.
I could send you a Dutch e-mail if it wll help explain things better :-)

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to put 'responsive' Youtube-player on landing page?

Post by Pablo » Sat Oct 07, 2017 5:59 pm

If you add a YouTube video to a layout grid then it will be responsive/flexible. There is no the way to make it flexible, because it needs some guidance what its size must be.
A layout grid can also have a background.

The Dutch support section is at the bottom of this forum.

User avatar
bburgess
 
 
Posts: 327
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

Re: How to put 'responsive' Youtube-player on landing page?

Post by bburgess » Wed Oct 11, 2017 1:28 am

You could also use a HTML object and insert the code:

You can get the code here: http://embedresponsively.com/

Works a treat.

Cheers
BB

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to put 'responsive' Youtube-player on landing page?

Post by Pablo » Wed Oct 11, 2017 5:44 am

See also the solution here:
viewtopic.php?f=18&t=78414

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests