Solved

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

Posted on 2016-08-04
7
45 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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)

920 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

12 Experts available now in Live!

Get 1:1 Help Now