Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    504
    Thanks
    80
    Thanked 0 Times in 0 Posts

    Avoiding the 'Back' button

    Hello

    I have an almost full-screen video clip with the usual 'controls' - volume, play button, etc. The video clip is loaded from another Web page with a couple of smaller size videos on it - clicking on the smaller video screenshots loads the larger scale video.

    There is no 'X' to come out of the larger video in the top right corner, so the user has to click on the 'Back' button to return to the original Web page with the smaller images. Is it possible to put a 'X' in place to come out of the page that holds the larger video clip, please?

    Thanks.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    Again asking for an answer without code.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    504
    Thanks
    80
    Thanked 0 Times in 0 Posts
    -screenindex-jpg-screengeneric2_kenya-jpgThis is the main index.html page that has two columns, one for video 1 (myViolin.mp4) on the left, and one for video 2 (Kenya.mp4) on the right:

    Code:
    <section class="wrapper style1">
    					<div class="inner">
    						<header class="align-center">
    							<h2>Appropriate headline here</h2>
    							<p>Introductory text here text here text here.</p>
    						</header>
    						
    							<div class="flex flex-2">
    								<div class="video col">
    									<div class="image fit">
    										<img src="https://www.codingforums.com/images/violin.jpg" alt="" />
    										<div class="arrow">
    											<div class="icon fa-play"></div>
    										</div>
    									</div>
    									<p class="caption">
    										Caption text here text here text here
    									</p>
    									<a href="generic.html" class="link"><span>Click Me</span></a>
    								</div>
    								
    								
    								<div class="video col">
    									<div class="image fit">
    										<img src="https://www.codingforums.com/images/jump.jpg" alt="" />
    										<div class="arrow">
    											<div class="icon fa-play"></div>
    										</div>
    									</div>
    									<p class="caption">
    										Caption text here text here text here
    									</p>
    									<a href="generic1.html" class="link"><span>Click Me</span></a>
    								</div>
    							</div>
    					</div>
    				</section>
    When the violin image on the left is clicked, it opens up a full-screen video in generic.html. When the jump jpg is clicked, it opens up a full-screen jpg in generic1.html.

    The code for generic.html (violin) looks like this to display a violin mp4:

    Code:
    <section class="wrapper style1">
    					<div class="inner">
    						<header class="align-center">
    							<h2>Appropriate headline here</h2>
    							<p>Text here text here text here.</p>
    						</header>
    						<div class="video">
    							<div class="video-wrapper">
    								<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/s6zR2T9vn2c" frameborder="0" allowfullscreen></iframe> -->
    								
    								<iframe width="560" height="315" src="https://www.codingforums.com/images/myViolin.mp4" frameborder="0" allowfullscreen></iframe>
    							</div>
    							<p class="caption">
    								Caption text here if necessary
    							</p>
    						</div>#
    </div>
    				</section>
    and the code for generic1.html, to display the 'jump movie (called Kenya.mp4), looks like this:

    Code:
    	<section class="wrapper style1">
    					<div class="inner">
    						<header class="align-center">
    							<h2>Headline here</h2>
    							<p>Text here text here text here</p>
    						</header>
    						<div class="video">
    							<div class="video-wrapper">
    								<iframe width="560" height="315" preload="metadata" controls src="https://www.codingforums.com/images/Kenya.mp4" frameborder="0" allowfullscreen playsinline></iframe>
    							</div>
    							<p class="caption">
    								For brief caption, text here text here text here.
    							</p>
    						</div>
    </div>
    				</section>
    So any 'X' to return to index.html would be relative to myVideo.mp4 and Kenya.mp4.

    Thank you.
    Last edited by Blue1; Dec 29th, 2018 at 12:35 AM.

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    This is not going to be a 9 post exchange like the last time. If you don't help out in the next reply I shall put you on my ignore list. PERIOD! I'm talking about this tread: https://www.codingforums.com/html-an...t=#post1557392
    You should say thank you if you have helped. You should return to the tread say thank you and mark the tread resolved.

    I asked you
    Blue1 you've been on this forum for more then 4 years you should know how this works. Please post what you have and not a scaled down version.
    How do I know you changed things? <img src="https://www.codingforums.com/images/violin.jpg" alt="" /> does not exist. I don't think codingforums ever saves images. Use the real code that you use on your site. Use a photo storage site or use this: <img src="https://unsplash.it/300" alt="" />
    unsplash.it is a free image site the 300 means a 300x300 random image. If you want a specific image go to site and pick one out, find out it's number. This shows a lite bridge at night: <img src="https://unsplash.it/300?image=84" alt="" />

    You say
    clicking on the smaller video screenshots loads the larger scale video.
    in post one. Your code does not show that. It shows an image with a Click Me anchor underneath <a href="generic1.html" class="link"><span>Click Me</span></a>

    HTML is not very good without the CSS. Always include it.

    Run your code before posting it here to see it is what you say it is, does run, does have the error. That's why I always include the doctype - head - body tags. The whole enchilada.

    And lastly before final posting use the 'preview post' button to see what it looks like before hitting 'submit'
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  5. #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    504
    Thanks
    80
    Thanked 0 Times in 0 Posts
    Sorry, I don't see 'Marked Resolved' anywhere here. Please advise.

    Here are the 2 screenshots I posted:

    -2screen-jpg

    Thanks

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Normally I advise against doing it this way in the markup, but since you've got pretty dirty code to begin with...

    Code:
    <a href="javascript:history.back();">X</a>
    Position that anchor using CSS wherever you want it to be. Only works scripting on, which is why I'd generate it from the scripting, perhaps with a noscript text saying "press back in your browser to return"... but for the most part that will do what you're asking for.

    If you've got some strange scripting going on that messes with the history that could just refresh the page, in which case you might have to try history.go(-1); instead. (possibly more than -1)... but try just plain back() first.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •