At a page I am showing a Youtube film in a lightbox.
I then want to show only the raw video film - no controls, play/pause buttons, fullscreen option, progress bar etc.
Right now it looks like this:
and I simply need to remove the top and bottom flash bars with icons. I know it slides away while the films is running, but I wish to always have them hidden.
Is this possible to hide from the film?
Update
From the answer from #Sven below I added controls=0&showinfo=0&rel=0 to the URL in the iframe and got the following:
This works fine for the purpose. It seems though that a Youtube logo is visible in the lower right corner instead when this other stuff is removed. This logo is only shown at hover.
Any ideas to hide this last bit?
Depending on how you are inserting the video, there are several configuration options.
https://developers.google.com/youtube/player_parameters
If you insert the link directly as an iframe most of the options work as GET parameters. In your case add controls=0&showinfo=0 to the video url.
Related
I have a page with a list of items and each has an Addthis share button, I wanted the 1st Facebook thumbnail in teh sharer to be that of the item selected, so I tried many solutions which didn't work, and finally I tried to dynamically write and read from SQL the URL to the thumbnail for og:image and rel="image_src" each time a user clicks the share button to the particular item, this way the Facebook scraper has the details to the selected item at parse-time, but yet it doesn't seem to work, the thumbnail is not even shown among the thumbnail options.
Is there a reliable way to set the main thumbnail when such a page has more than 1 share button?
ShareThis offers the option to select the thumbnail image using the st_image tag, here you can find more info. So basically I had to switch from Addthis to ShareThis.
I am trying to build a page where i am having an image. Now I want to do a task that when ever mouse is taken over a certain part of image , that image with some links popup as a Mouse Hover Functionality.
Like For E.g. I have a map of US(as an Image on my Webpage) , and in that when I take the mouse over its State ( say: Texas) then the image of Texas ( which is embedded as Hyper link ) pops up in larger view and that image have additional links of Cities and user should be able to click those links and can reach the page of that City.
I Hope my Query is Clear.
You can use image maps to break into areas(for eg states). You can some jquery library like maphighlight, to show the hovering effect. And finally since you want to show dynamic content in the pop up boxes, you can create a generic template which gets populated based off the id being passed and then you can make ajax request to that page and pass the id along. Also colorbox(is a type of lightbox) supports image maps, so you can populate it using ajax, just by passing the urul in href tags of each area.
I need a way to automatically generate a thumbnail of the target page when the user hover over a URL (hyperlink) on my page.
I've found several examples of people using pre-created .gifs (or other images) to show a thumbnail of the target site while hovering over the link (see example #1), but I need a way to do this dynamically. Is there a way to generate a thumbnail of a page, either on runtime, or an easy way to update the current thumbnail after editing a page?
Simply put; I need to show a thumbnail of the target page when hovering a hyperlink on my page. This thumbnail should not be based on an image that I have to generate myself after each edit, but rather a snapshot of the current page. Much like google does when searching for websites.
Thanks a lot in advance!
Example #1:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
Hover your mouse over "Zoka Coffee"..
Try to study about this library html2canvas
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.
Ok so i have this page. As you can see on this page I have a header that if you click on the three little dots on the right a new image and movie is displayed. this works great at the moment. The problem is the client now wants the page to rotate and I have tried this in the past but the problem arises when someone clicks on the movie and starts watching it. The page will continue to rotate and there is no way i could find to stop the rotate when the movie is clicked. I tried to wrap the video around a div tag and see if i can catch the click there with javascript but nothing..it still rotated....any ideas
The cheap and dirty solution may be to not embed the Flash player right away, but instead show a preview still of the movie that looks like the player. When it's clicked, you can kill the page rotation, and load the Flash embed code on-the-fly.
If that doesn't float your boat, try reading up on the parts of the ActionScript API that lets Flash call Javascript.
Have a look at the validated answer it sums things up: javascript onclick event over flash object