Placement of video in mobile

Hi, please see: http[colon] //clinica-americas.com/abdominal-hernia.html

When I click on the video on a mobile device, I have to scroll up to see it. What can I do to ensure that the video shows up where I click see video? Thanks!
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The good news is you are using bootstrap.  The sad news is you are using version 2.  If you are starting this out as a new project, I would suggest moving to v3.  http://getbootstrap.com/  You will have some rewriting of classes and structure, but it is more straight forward.

Anyway, for v2 there are responsive utilties http://getbootstrap.com/2.3.2/scaffolding.html#responsive Click "Responsive Design" on the left and scroll down to "Responsive utility classes" or just scroll down toward the bottom to find that area.

You can see there are classes for hidden-desktop and hidden-tablet.  On your aside code, add these classes and the side content will hide rather than show up on the top.

This is what you have
<aside class="pull-left">
<h3>Type of Services</h3>
<div class="asideBox">
<h4>General Surgery</h4>
<ul>
<li><a href="appendicitis.html">Appendicitis</a></li>
<li><a href="gallbladder.html">Gallbladder</a></li>
<li><a href="hiatal-hernia.html">Hiatal Hernia</a></li>
<li><a href="abdominal-hernia.html">Abdominal Hernia</a></li>
<li><a href="inguinal-hernia.html">Inguinal Hernia</a></li>
<li><a href="laparoscopy.html">Laparoscopy</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Gastroenterology</h4>
<ul>
<li><a href="reflux.html">GERD</a></li>
<li><a href="cirrhosis.html">Cirrhosis</a></li>
<li><a href="ibs.html">IBS (Irritable Bowel Syndrome)</a></li>
<li><a href="endoscopy-upper.html">Upper Endoscopy</a></li> 
<li><a href="endoscopy-lower.html">Lower Endoscopy</a></li>
<li><a href="ercp.html">ERCP (Endoscopic Retrograde Cholanghio Pancreatography)</a></li>
<li><a href="pill-cam.html">Pill Cam</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Palliative Treatment</h4>
<ul>
<li><a href="cancer.html">Cancer</a></li>
<li><a href="peg.html">P.E.G. (Percutaneous Endoscopic Gastrostomy)</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Obesity</h4>
<ul>
<li><a href="balloon.html">Intragastric Balloon</a></li>
<li><a href="lap-band.html">Lap Band</a></li>
</ul>
</div>

</aside>

Open in new window

And change to below. Note line 1 is where I added the classes.
<aside class="pull-left hidden-desktop hidden-tablet">
<h3>Type of Services</h3>
<div class="asideBox">
<h4>General Surgery</h4>
<ul>
<li><a href="appendicitis.html">Appendicitis</a></li>
<li><a href="gallbladder.html">Gallbladder</a></li>
<li><a href="hiatal-hernia.html">Hiatal Hernia</a></li>
<li><a href="abdominal-hernia.html">Abdominal Hernia</a></li>
<li><a href="inguinal-hernia.html">Inguinal Hernia</a></li>
<li><a href="laparoscopy.html">Laparoscopy</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Gastroenterology</h4>
<ul>
<li><a href="reflux.html">GERD</a></li>
<li><a href="cirrhosis.html">Cirrhosis</a></li>
<li><a href="ibs.html">IBS (Irritable Bowel Syndrome)</a></li>
<li><a href="endoscopy-upper.html">Upper Endoscopy</a></li> 
<li><a href="endoscopy-lower.html">Lower Endoscopy</a></li>
<li><a href="ercp.html">ERCP (Endoscopic Retrograde Cholanghio Pancreatography)</a></li>
<li><a href="pill-cam.html">Pill Cam</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Palliative Treatment</h4>
<ul>
<li><a href="cancer.html">Cancer</a></li>
<li><a href="peg.html">P.E.G. (Percutaneous Endoscopic Gastrostomy)</a></li>
</ul>
</div>
<div class="asideBox">
<h4>Obesity</h4>
<ul>
<li><a href="balloon.html">Intragastric Balloon</a></li>
<li><a href="lap-band.html">Lap Band</a></li>
</ul>
</div>

</aside>

Open in new window

0
mel200Author Commented:
Thanks very much! You're right, this is an older project that I'm revamping.
0
mel200Author Commented:
Ok, I added that to http://clinica-americas.com/espanol/appendicitis.html

but it doesn't seem to be working... in any case, I would need people to see it, so that they can select another category...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
Interestingly, it seems to have hidden that menu on desktop, but left it live on mobile. :)
0
mel200Author Commented:
I changed it to hidden- mobile hidden-tablet.
0
mel200Author Commented:
Oh.. then I changed it to hidden-phone.
0
mel200Author Commented:
So that works, it is hidden on mobile. But:

1. The video is still higher up on the page than I want it.

2. I require that menu to remain there, so that people can visit another page if they wish,

Thanks for your help!
0
David Johnson, CD, MVPOwnerCommented:
http://clinica-americas.com/espanol/appendicitis.html
Not Found

The requested URL /espanol/appendicitis.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache Server at clinica-americas.com Port 80
0
lenamtlCommented:
Hi,

The parent DIV that contain the Video DIV should have position: relative;

If this is not fixing you should try to use Bootstrap Modal
Here an example using Bootstrap modal
http://jsfiddle.net/jeremykenedy/h8daS/1/

Bootstrap reference modal & Youtube
http://getbootstrap.com/javascript/#embedding-youtube-videos
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
oh darn, sorry, I changed the structure. Now it is just http://clinica-americas.com/appendicitis.html
0
mel200Author Commented:
I will look into those suggestions, thanks!
0
mel200Author Commented:
That works perfectly, thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.