-
Posts
-
We have a youtube video linked to an icon box. We would like to remove the youtube logo from the video and resize the lightbox, but are not sure how/where to input the embed code that includes “modestbranding” and video dimensions. Any suggestions?
Thanks!
Hey ToddYoungLLC,
Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.
Regards,
RikardHey!
We were able to login but cannot access the WP dashboard have you set the user role to admin?
To remove the youtube branding please check
Once you setup the video let us know and we can help you with the lightbox size. let us know what size you want the lightbox.
Regards,
Vinay KashyapThanks Vinay, we set your role to admin so you could take a closer look. The problem is, the video isn’t really embedded, it’s a link from an icon. We want the icon button to launch a lightbox with no branding. We tried using Wistia, which would be our preferred player, but simply entering the Wistia link doesn’t open a lightbox. Here’s what we would like to have happen, in an ideal world:
The visitor can mouse-over the icon and see the tool-tip (as per the normal icon settings). The tool-tip let’s them know that the icon is a button to play a video. When the visitor clicks on the icon, it automatically opens a full-screen video player (lightbox?) which starts playing the linked video automatically. The user then has the option to collapse the window to normal player size and full control over play, reverse, etc. All the while, the website is dimmed in the background.
We understand this might require a custom coding request but are wondering if this might be handled with some CSS or quick code first?
Hey!
Youtube allows you to modify the way the video looks and we can achieve something very close to your description.
Please check the test page we have created in backend “enfold test – video lightbox”
When you add the youtube video you need to add some parameters to the URL which will change the look of the video
https://www.youtube.com/watch?v=7Ya71Vtkccc?&controls=0&modestbranding=0&autoplay=1&rel=0&showinfo=0&hd=1&autohide=1&color=white in the above URL On = 1 and Off = 0 the rest of them are parameters allowed by google controls=0 modestbranding=0 autoplay=1 rel=0 showinfo=0 hd=1 autohide=1 color=whiteUse this link to build your own URL http://www.vtubetools.com/ then modify it without the iframe as showin int he above link.
For more details please ref to https://developers.google.com/youtube/player_parameters
We also added the below css in Quick CSS to make the lightbox video larger
/* Lightbox Video width */ .mfp-iframe-holder .mfp-content { width: 100%; max-width: 70%!important; }Cheers!
Vinay KashyapThat worked Vinay, thank you!
One more question, since you have access to our site: we are experiencing some difficulty with our product pages. We’ve installed a plug-in that allows us to put custom backgrounds on the product pages, which seems to be working although the product pages seem to have a layer of opaque white over the background images, which only become momentarily visible when you force scroll at the top of the page.
Also (sorry, this makes it 2 questions) is there a way to get custom backgrounds on the shop, cart and checkout pages? Woo commerce doesn’t like the Advanced Editor.
Many thanks!
Todd
Hey!
Sorry i am not aware of the 3rd party plugin you are using it would be best to ask the plugin author about it.
To add different background image to different pages right click inspect the page and view the <body class”so many class names”>
Woocommerce has different class names for product page, shop, cart and checkout pages
for example if you inspect the product page woocommerce adds class “single-product” to the product pages.
You can then use these class names and add your custom backround image in quick css like
.single-product{ background-image: url("image.jpg"); background-size:cover; }Cheers!
Vinay KashyapThanks Vinay,
We entered this code in the quick CSS and it doesn’t work:
.single-product{
background-image: http://www.femina-plus.com/wpcontent/uploads/2016/03/Orchids-100dpi-55.jpg;
background-size:cover;
}Did we do something wrong? Are we suppose to enter some class information also? Please advise.
Hi!
the img http://www.femina-plus.com/wpcontent/uploads/2016/03/Orchids-100dpi-55.jpg seems not to exist.
Please check the image to be correct.Cheers!
BasilisThanks Basilis,
I updated the link and it still doesn’t work:
.single-product{
background-image: http://www.femina-plus.com/wp-content/uploads/2016/03/Orchids-100dpi-55.jpg;
background-size:cover;
}Hey!
Please note the css should be as below you missed the URL before the image path :)
Request you to create new tickets for new issues sow e can keep the focus on main topic.
.single-product{ background-image: url("http://www.femina-plus.com/wp-content/uploads/2016/03/Orchids-100dpi-55.jpg"); background-size:cover; }Regards,
Vinay Kashyap
- You must be logged in to reply to this topic.