Solved

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

Posted on 2016-08-04
7
48 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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