Solved

How to launch a video box by clicking on some other text on my webpage...

Posted on 2016-08-04
7
42 Views
Last Modified: 2016-08-13
Hi experts... please have a look at my website - www.thedatasurgeon.net. You'll see the video with its play button front and center there. I'm wondering if there is a way to launch that same video by someone clicking also on the "Searching and fixing your big data was never easier" text. So essentially, I want a click on that text to "mimic" someone clicking on the real video play button.

Thanks!
    Shawn
0
Comment
Question by:shawn857
  • 4
  • 2
7 Comments
 
LVL 50

Expert Comment

by:Steve Bink
ID: 41744312
You can't.  Your video is an iframe coming from YouTube, which is a cross-origin iframe.  You will not be able to access the contents.

On the bright side, what you want to do is really not necessary.  A user coming to the page is not going to see the header, see the video, then decide to click on the header.  If they want to see the video, they'll click on the video.
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 41744727
While I agree with Steve that there's little point to doing that, Youtube provides an API to do that and more.

You first have to add a query string to enable the API:
<iframe width="580" height="362" src="https://www.youtube.com/embed/sp5CeLxnDlI?enablejsapi=1" style="border: 0" webkitallowfullscreen allowfullscreen></iframe>

Open in new window

Then you can do something like this:
jQuery(document).ready(function(){
	$('.slogan h1').on('click',function(){
		var iframe=$('.video iframe').get(0),cWin=iframe.contentWindow;	
		if(cWin && cWin.postMessage) {
			cWin.postMessage('{"event":"command","func":"playVideo","args":""}','*');
		}
	});
});

Open in new window

P.S. Please consider removing the ", maximum-scale=1" from the viewport meta tag. Zooming is an important feature that shouldn't be disabled without very good reason.
0
 

Author Comment

by:shawn857
ID: 41744754
Thanks Steve. Well, I've been monitoring the "click activity" on that page using hotjar.com and it's showing that a lot of my visitors indeed click on the header, believe it or not. That's why I'd like to launch the video via a click on the header.
   In lieu of that, maybe I could just have my video start playing as soon as a user lands on my page.... how would that be accomplished?

Thanks
   Shawn
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:shawn857
ID: 41745042
David S. - hey that worked! I'm going to give it a whirl and see how it pans out. I added all the "jQuery(document).ready(function(){" code right after my opening <body> tag and all seems to work fine. Is that where it should be, or it doesn't really matter?

Thanks!
   Shawn
0
 

Author Comment

by:shawn857
ID: 41751335
Hi David S. ... could you confirm please that I did everything okay? It appears to be.

Thanks!
    Shawn
0
 
LVL 42

Expert Comment

by:David S.
ID: 41754408
It seems to be working, but since you asked, if it were me, I'd put it at the end of the page with the <script> elements there. Placing scripts as close to the end of a page as possible is better for loading performance.

Since ".slogan" is now clickable, you may want to give it "cursor:pointer" and since it's not a link or button it's better to do it via the JS.
jQuery(document).ready(function(){
	$('.slogan').on('click',function(){
		var iframe=$('.video iframe').get(0),cWin=iframe.contentWindow;	
		if(cWin && cWin.postMessage) {
			cWin.postMessage('{"event":"command","func":"playVideo","args":""}','*');
		}
	}).css({cursor:'pointer'});
});

Open in new window

Thanks for removing the maximum-scale parameter.

In case you'd like to learn more about optimizing loading performance, Google provides some excellent resources: https://developers.google.com/speed/docs/insights/rules
0
 

Author Closing Comment

by:shawn857
ID: 41755002
Great! Thank you David!

Cheers
   Shawn
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now