Serving different videos depending on media size

[NooseLadder]

I currently include a You tube video on a page directly in the body TinyMCE using iframe.

<div class="video_container"><iframe src="http://www.youtube.com/embed/somevideo?rel=0&fs=0&modestbranding=1&showinfo=0" width="460" height="260" frameborder="0"></iframe></div><!-- end video_container -->
 

My layout is responsive, as is the video. That's not a problem. At the end of the video there is an animation of an arrow with a call to action pointing to a form to the right of the video.

However when the media screen size drops below 768px the form drops below the video (this is correct). But the arrow at the end of the vid is still pointing to the right, whereas it should now be pointing down to the form.

I can create another video to do this but is there a way to switch videos at 768px (or any)  media size?

[diogo]

With javascript of course. You just have to be careful that the video is not switched in the middle when someone adjusts the browser window.

[ryan]

You might want to also look at using the YouTube/Vimeo Textformatter module on your body field. It includes a responsive option as well in the module settings.

[NooseLadder]

I will look at that thanks. Does that include options for swapping videos or will I have to do something additional?