How do I make a link open the linked page's video? - javascript

Long story short: (tried looking this up to no avail; maybe not wording it right? newbie here).
I'm working on a mobile-friendly webpage. On this webpage is a button. When you click said button, it takes you to ANOTHER webpage with a video on it.
The desired effect I'm looking for is when you click on the button, it doesn't take you to the new page, but rather opens up the video on the spot.
Is this achievable? Thank you in advance.

I have created a jsfiddle, see below, so that if you click on the button, it loads the video without bringing you to a new page as you requested.
http://jsfiddle.net/yb6s7fud/
Here is the jquery code I used:
$(document).ready(function () {
$('button').click(function () {
var video = '<iframe src="https://www.youtube.com/embed/koJlIGDImiU?autoplay=1"
frameborder="0" allowfullscreen></iframe>';
$("#video").append(video);
});
});
Hopefully this is what you are looking for.

With youtube you can easily open the video in a modal box.
With other webiste you can open a iframe modal with the entire page content. You can affect iframe with jquery to take only the video only if the other page is the same domain.

Have you tried creating a container with the right properties so inside you can place an iframe? The button should be the anchor to the iframe source.

Related

Python Selenium - how to click full screen button of a video without a frame

I am working with selenium for the first time, and I'm trying to play a video on another website.
I've already managed to play the video, but now I'm stuck trying to make it full-screen. The full-screen button is hidden unless I hover with my mouse over it.
So I searched for a solution and everybody suggests to use switch_to.frame() and then access the button, but it seems like no frame surrounds the video in my case. I'm not an expert in HTML so maybe I am getting this wrong, but is there a way to click that full-screen button when there's no frame surrounding the video?
Thanks in advance for any help :)
If there isn't an iframe containing the video, you should be able to click the button like you would any other on the screen. To get the hover menu to appear you can use ActionChains(driver).move_to_element(element).perform().
If you're having issues finding the button, you may also be able to video_player.send_keys("f"). Many players will use that shortcut to switch to fullscreen.

How do I trigger a lightbox gallery in html or javascript for a single image?

Here is my question,
Can I place a script or a code of some sort next to an image to make it pop out in a lightbox, without messing with the css? Just a simple single image that when clicked on just pops out in a lightbox.
Sort of like this:
<img src="image">
But instead of ref to a url, I would like to make a full screen lightbox pop out. So the user doesn't have to click back or open another tab.
Any help is highly appreciated.
Yes you can, I like Fancybox as an versatile jQuery tool with many functions and options. See here for examples.

Youtube/SoundCloud video open in new tab when clicked

I am trying to add to my Tumblr page a way for when a youtube video or a SoundClouds is clicked, it shall open into another window. I am unable to figure out how to do this.
Here is a example of them code I am using for SoundCloud
{text:Link Two Title}
If you want it to open in another window, why don't you link to it instead of using an iframe? Using a iframe is for when you want it specifically within an area of the same window.
Try something like this:
Setting the target attribute to _blank should open the link in a new window.
Go for an anchor tag i.e.<a>
This should solve the issue.
See the code below:
<html>
<body>
Sound Cloud
</body>
</html>
Hope this helps

Pausing a You Tube video when the page is hidden

I have created a site where instead of "pages" i have created divs that show/hide on different menu clicks using the code below.
The only issue is the You Tube videos on one of the pages, when the user plays the video they then have to stop it otherwise the video continues to play when visiting other pages.
Is there a way to pause the video when the user leaves the page or to just stop the video outright when clicking on another content.
Here is the code for the page navigation
$('#homePage').show();
$('.nav').click(function () {
$('.page:visible').slideUp('slow'); // or .hide()
$($(this).data('target')).slideDown('slow'); // or.show()
})
Any help is greatly appreciated
Hi this page should help a lot. https://developers.google.com/youtube/iframe_api_reference. You are just going to 'wrap' the video in the youtube Api and use their events and methods already tied to it.
Basically what you will need to do is when the div is closed or a button to x out of the video is clicked you will need to do something like this.
$("#myDiv").click(function () {
player.stopVideo();
});
One thing to note is that if you are going to be hidding the showing the div that contains the Iframe you will need to re-add the player everytime it is shown or you will lose your events that are tied to it. I hope this helps.

Trying to open some links with an inline modal popup window

I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.

Categories

Resources