-
Posts
-
Hello,
On my homepage, just under the main header image, I’ve put an image to a video. I would like the folowing process but don’t manage to do it :
– the user clicks on the image
– the video is displayed in a nice lightbox.I’ve tried :
– video element : not possible to set up a static different image
– create a page with my video in an iframe – use an image element with the manuel link to the video : http://www…………. /?iframe=true : it’s close to what I’ like but the page has border, background, it’s not very nice – this is the version on my site right now
– I’ve seen this topic : https://kriesi.at/support/topic/video-in-lightbox/ but the video doesn’t not open in a lightbox…Can you help me?
Tx a lot,
Nice we
Marinewhat kind of video link is it – a selfhosted or youtube or vimeo ?
first place an image element . On that element there is a second tab – “link settings”
place an individuell (manuell link) put in the video url
and just try to ad after the url ?iframe=true f.e.https://vimeo.com/4949853?iframe=truethe first option must added with the “?” after that each option has to be added by “&” so f.e.
https://vimeo.com/4949853?iframe=true&autoplay=1see here: https://webers-testseite.de/ikom/video/
for youtube i think it is similar to that. For selfhosted i did not do a test til now.
It’s what I already did, it’s a youtube video. But I wanted a lightbox with no background, no margin…
well a lightbox is a lightbox – but you want it as big as possible!
please insert into your quick css:
.mfp-iframe-scaler { height: 55vw !important; width: 98vw !important; }you can do 100vw and 56vw – but than i think the close button is out of screen. ( The values concern to 16:9 ratio)
btw: on youtube something changes with embed code !!! do not take the embed code instead look to your url in the browser window for that video on my example (right side) the link in the url is:
https://www.youtube.com/watch?v=B7wkzmZ4GBw
the link given to you by clicking the share button is:
https://youtu.be/B7wkzmZ4GBw
if you click on embed on that screen you will get the iframe link:
<iframe width="560" height="315" src="https://www.youtube.com/embed/B7wkzmZ4GBw?rel=0" frameborder="0" allowfullscreen></iframe>But we need the url in the browser add to that url:
https://www.youtube.com/watch?v=B7wkzmZ4GBw?rel=0&autoplay=1&iframe=true
and place it as manual linkHi!
That also depends with the selected method of the video quality.
It is better if you want to load the lightbox, to load a big quality so you can saw it good when in lightboxBest regards,
BasilisTx for your answers guys.
I’ve integrated the Youtube URL directly (without the iframe code), I just have a bottom margin left.
Here is the page URL : please click just under the main header image on the small image tablet with the player.As you can see, I have the scroll bar on the right of the lightbox I’d like to remove. To remove the padding at the top and left I’ve done this ‘(ID video on the color section with a text block and my video link)
#video .container { padding-right: 0; padding-left: 0; } .html_header_transparency #top .avia-builder-el-0#video .container { padding-top: 0; }How to get rid of the scroll bar and the small bottom white part?
Tx !and !!! what do you inserted in your video link ? this ist your site where the video to youtube is linked ?
that is why you got that scroll you got an iframe in an iframe !see again here: https://webers-testseite.de/ikom/video/
do as manual link on your page direktly the link to youtube page :
https://www.youtube.com/watch?v=waXFJHu2Jy8?autoplay=1&rel=0&iframe=trueHi,
Great, thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
- The topic ‘Display video in a lightbox after a click on an image’ is closed to new replies.