Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-08-04
7
Medium Priority
?
52 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 51

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 43

Accepted Solution

by:
David S. earned 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 43

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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

721 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