Stretch YouTube Vimeo etc Videos to Fit Your Browser Width Responsively 
Author: Rod M.
Visited 1833,
Followers 2,
Shared 0
I know videos can be put into "Row Formats" but it does it without the controls for the video.
I'd like to put a video that is responsive to browser width, keeping the ratio and the start/pause volume, video position and all other controls. As in this web site
HTML5 as far as I can see support this. I have been trying to put in work arounds such as one suggested here
https://www.ostraining.com/blog/coding/responsive-videos/
But I can't seem to get any of this to work, or find where to put the CSS code.
It would be great to set video height and width to 0 makes a video expand to the maximum width keeping aspect ratio.
Thank you to anyone who can help me
Posted on the
Sorry, have no time to test your question, but try this https://helpcenter.websitex5.com/en/post/168182
maybe it does what you want.
Best Regards,
Author
Thank you for posting Andre, however it is not what I want. The videos in your suggested solution does not span the width of the browser, as does the one at https://celebratetruth.org/ (scroll down a little)
The CSS Stylesheet code suggested at the other link is
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
I have tried pasting that code in Page Prooperties > Expert - then I have tried all the options in the custom code sectopn individually
THEN the html video link (just an example below)/
<div class="video-responsive"><iframe width="420"height="315"src="https://www.youtube.com/watch?v=iqmgje6LggQ"frameborder="0"allowfullscreen></iframe></div>
is put where you want the video to be, which I did using the HTML cell.
Perhaps there is another place where CSS stylesheet code should go.
Hello Rod,
You can add the CSS code in the HTML code object in the expert tab.
I would suggest to check the iframe code which seems to be not correct.
Unfortunately we do not provide support for custom HTML code but only for functions inside the program.
You can wait to see if any other user of the community is able to help you further.
Many thanks!
(Translated by google)
> example - Tubular + IFRAME + my invention; (Ctrl+U);
> example - YT CSS (Andre E.) + IFRAME + my invention; (Ctrl+U);
I do not speak English and I do not have the WebSiteX5 program.
If you're interested, post your page's link with these options:
1) for the test, make a simple site with little content; with the top menu; with the empty header, transparent, and high 200 pixels; ... with this option:
Horizontal – Menu above the header;
2) publish the site and post the link: www.sitename/
... And then I'll tell you how to go, maybe with the help of Andre E. for translation.
Otherwise ignore this message.
.................................
(IT) - > esempio - tubular + mia invenzione;
Orizzontale - Menu sopra l'Header;
> esempio - YT CSS (Andre E.) + mia invenzione;
io non parlo inglese e non ho il programma WebSiteX5.
se ti interessa, pubblica il link della tua pagina con queste opzioni:
1) per la prova, realizzare un sito semplice con pochi contenuti; con il menu in alto; con l'intestazione vuota, trasparente, ed alta 200 pixel; ...con questa opzione:
3) pubblicare il sito e postare il link: www.nomesito/2e poi ti dirò come proseguire, magari con l'aiuto di Andre per la traduzione.
... e poi ti dirò come proseguire, magari con l'aiuto di Andre E. per la traduzione.
Altrimenti ignorare questo messaggio.
.
ciao a tutti
.
Author
Thank you so much for your hard work. I have been away for a while and just come back. Thank you for your example. I will set to work and see what I can do. Your help is very much appreciated.