Solved

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

Posted on 2016-08-04
7
49 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 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
Independent Software Vendors: 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 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
boostsrap 1 34
Editing .asp website 5 30
Best explanation of following code css 11 40
CSS Selector Chain NOT working for this situation? 3 12
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

734 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